Задать вопрос

Елена

начинающий веб-программист
Комментарии

  • Как исправить частично работающее условие?

    @Elena_7 Автор вопроса
    MagnusDidNotBetray, спасибо Вам огромное! работает!!! РАБОТАЕТ!!! ура!
    Написано

  • Как исправить частично работающее условие?

    @Elena_7 Автор вопроса
    извините если что не так отправляю, я первый раз тут вопрос задаю
    Написано

  • Как исправить частично работающее условие?

    @Elena_7 Автор вопроса 
    p 
{
	color: #ff0000;
}

h3 
{
	color: #0000ff;
}

.button 
{
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.box 
{
	width: 120px;
	height: 120px;
	border: 2px inset gray;
	margin: 4px 2px;
	margin-bottom: 1em;
	float: left;
}
    Написано

  • Как исправить частично работающее условие?

    @Elena_7 Автор вопроса 
    <head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css">
		<title>Пример js43</title>
	</head>
	<body>
		
		<h1>Фильтры и анимация</h1>
		<p id="p1">Первый параграф</p>
		<p id="p2">Второй параграф</p>
		<p id="p3">Третий параграф</p>
		<input type="button" class="button" id="button1" value="Анимация">
		<input type="button" class="button" id="button2" value="Сброс">
		<input type="button" class="button" id="button3" value="Фильтр">
		<input type="button" class="button" id="button4" value="Переключение">
		<input type="button" class="button" id="button5" value="Домашняя работа">
		<br>
		<div class="box" id="box1"></div>
		<div class="box" id="box2"></div>
		<div class="box" id="box3"></div>
		
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script type="module" src="./main.js"></script>    
	</body>
</html>
    Написано

  • Как исправить частично работающее условие?

    @Elena_7 Автор вопроса
    Вот полный код этого задания
    // Модуль lib

    export function InitButton()
    {
    $("#button1").click(Button1);
    $("#button2").click(Button2);
    $("#button3").click(Button3);
    $("#button4").click(Button4);
    $("#button5").click(Button5);
    }

    function Button1()
    {
    $("#box1").animate(
    {
    width: "90%", // ширина элемента
    height: "150px", // высота элемента
    fontSize: "2em", // размер шрифта элемента
    borderWidth: "5px" // ширина границ элемента
    }, 1000, "linear", EndButton1
    );
    }

    // Завершение анимации
    function EndButton1()
    {
    $(this).text("Анимация закончена").css("color", "blue");
    }

    // Возврат к исходным значениям
    function ResetBox()
    {
    $("#box1").css(
    {
    width: "", // ширина элемента
    height: "", // высота элемента
    fontSize: "", // размер шрифта элемента
    borderWidth: "" // ширина границ элемента
    }).text("");
    }

    function Button2()
    {
    ResetBox();
    }

    function Button3()
    {
    // выбираем все нечетные элементы
    $("*:odd", document.body).css("border", "1px solid red");
    // выбираем четные div
    $('div:even').css("background-color", "yellow");
    // выбираем последний div в DOM
    $('div:last').css("border", "3px dotted blue");;
    }

    // Переключение параграфов
    function Button4()
    {
    $(".box").animate({
    height: "toggle",
    opacity: "toggle"
    }, "slow" );
    }

    //Добавьте на страницу пятую кнопку, при нажатии на которую меняется оформление боксов с анимацией: box1 - уменьшится, box2 - увеличится , box3 - сменит цвет. При следующем нажатии вернутся исходные значения.

    let clickCount = 0;

    $("#button5").click(Button5);

    function Button5() {
    clickCount++;

    if (clickCount == 1) {
    $("#box1").animate({
    width: "10%",
    height: "50px",
    }, 800, "linear");

    $("#box2").animate({
    width: "50%",
    height: "300px",
    }, 1000, "linear");

    $(".box3").css({
    "backgroundColor": "blue",
    });
    }
    else if(clickCount == 2) {
    $(".box").css({
    width: "", // ширина элемента
    height: "", // высота элемента
    fontSize: "", // размер шрифта элемента
    borderWidth: "", // ширина границ элемента
    "backgroundColor": "white",
    }).text("");
    clickCount = 0;
    }
    }

    // Пример js43
    import * as lib from './lib.js';

    // Выполнить скрипт после загрузки документа
    $(document).ready(function()
    {
    lib.InitButton();

    });
    Написано

  • Как исправить частично работающее условие?

    @Elena_7 Автор вопроса
    я вижу, что у Вас работает пример, но я сделала всё в точности у себя и не работает. Это может быть связано с тем, что я использую версию jQuery 3.5.1, а не 3.4.1 как используете вы?
    Написано

  • Как исправить частично работающее условие?

    @Elena_7 Автор вопроса
    Спасибо, что ответили! Поменяла как Вы рекомендовали, третий бокс не меняет синий цвет всё равно. и перестала работать функция по второму клику. Вот это clickCount = 0; // обнуляем убираю и работает, но опять только два клика, на третий ничего и нет синего цвета. Может есть еще какое-то решение?
    Написано