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

Question

Елена @Elena_7

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

JavaScript

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

Если закомментировать второе условие, цвет третьего бокса меняется на синий. Если второе условие снова открыть: при первом клике меняются параметры 1 и 2 боксов, цвет третьего на синий не меняется (а по идее должен). При втором клике все работает: параметры всех боксов возвращаются к исходным. Почему так происходит? Как сделать, чтобы цвет менялся на синий в третьем боксе при первом клике. И еще, как сделать, чтобы цикл повторялся? Сейчас он после второго клика и возврата к стартовым характеристикам останавливается и при третьем клике не работает (не прописывать же 100 кликов).

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({
		"background-color": "blue",	
		});
	}
	else(clickCount == 2)
	{
    $(".box").css(
    {
	    width: "", // ширина элемента
	    height: "", // высота элемента
	    fontSize: "", // размер шрифта элемента
	    borderWidth: "", // ширина границ элемента
	    "background-color": "#FFFFFF",
    }).text("");}

}

Вопрос задан более трёх лет назад
113 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

8 комментариев

Елена @Elena_7 Автор вопроса

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

Написано более трёх лет назад
MagnusDidNotBetray @MagnusDidNotBetray

Елена, я использую у себя классы, а у вас там id были. Вы заменили везде ".box1" на "#box1" (точки на диезы)? Или просто залейте код в песочницу, чтобы я не гадал.

Написано более трёх лет назад
Елена @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 Автор вопроса

<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 Автор вопроса

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 Автор вопроса

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

Написано более трёх лет назад

MagnusDidNotBetray @MagnusDidNotBetray

Елена, вы два раза вешаете обработчик события на button5:

function InitButton() {
  $("#button1").click(Button1);
  $("#button2").click(Button2);
  $("#button3").click(Button3);
  $("#button4").click(Button4);
  $("#button5").click(Button5); // вот здесь
}

let clickCount = 0;

$("#button5").click(Button5); // и здесь, эту строку нужно удалить.

И замените $('.box3') на $('#box3')

Написано более трёх лет назад

Елена @Elena_7 Автор вопроса

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

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

8 комментариев

Steppp @Steppp

Привет, а можно узнать почему var место let ? На сколько я знаю var устарел

Написано более трёх лет назад
Володимир Паламар @GORNOSTAY25

Steppp, var и let отличаются только областью видимости переменных. Классика не устраивает

Написано более трёх лет назад
Steppp @Steppp

Володимир Паламар, По другому спрошу! Почему в данном случае (с jqyery) лучше var, а не let?

Я знаю чем отличается var let const, Но я не пойму почему тут лучше var?

Написано более трёх лет назад
Елена @Elena_7 Автор вопроса

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

Написано более трёх лет назад
Володимир Паламар @GORNOSTAY25

Steppp, потому что у var больше область видимости и по сколько это глобальная переменная ей кто не помешает

Написано более трёх лет назад
Steppp @Steppp

Володимир Паламар, ))) Понятно что ничего не понятно) Но если влияет только на область видимости, то лучше использовать let) Я jq не знаю, думал там есть разница var let! но если нет никакой разницы, то и let вполне нормально будет работать)
По сути в этом коде let тоже глобальная) И нет никакой разницы var let

Написано более трёх лет назад
kikkigenkai @kikkigenkai

Володимир Паламар, в данном случае что var что let будут глобальными и им никто не помешает) на счет большего скоупа у var - да, он больше, выходит за блок) Это не классика, а пофикшенная let-ом проблема

Написано более трёх лет назад
Володимир Паламар @GORNOSTAY25

kikkigenkai, возможно вы правы

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

Простой
Выдает ошибку, сам файл не нулл(а ошибка выдается там где подключается жс), как исправить?
- 1 подписчик
- 51 минуту назад
- 29 просмотров
0

ответов
JavaScript

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 51 минуту назад
- 43 просмотра
0

ответов
JavaScript

Простой
Какой фреймворк использовать для форм JS?
- 1 подписчик
- 54 минуты назад
- 28 просмотров
0

ответов
JavaScript

Простой
Почему change срабатывает раньше чем click?
- 1 подписчик
- час назад
- 45 просмотров
1

ответ
JavaScript

Простой
Как получить metadata аудио на IOS?
- 1 подписчик
- 7 часов назад
- 20 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- вчера
- 96 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- вчера
- 113 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- вчера
- 87 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- вчера
- 39 просмотров
1

ответ
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- вчера
- 46 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Разработка VST-плагина

19 апр. 2024, в 20:43

20000 руб./за проект

Нарисовать баннер для интернет-магазина

19 апр. 2024, в 20:35

500 руб./в час

Разработать несистемный алерт

19 апр. 2024, в 20:11

500 руб./за проект

Answer 1 · 2020-09-23 17:22:22

Не работает, потому что ошибок много.
Не else(clickCount == 2), а
else if(clickCount == 2)
Не "background-color", а "backgroundColor"
Счетчик нужно обнулить, как сказали выше.

Answer 2 · 2020-09-23 16:13:54

Нужно счётчик обнулить у вас указано действия только когда счётчик == 1 и == 2 когда от > 2 ничего не делается. И счётчик должен быть не let а var

var clickCount = 0;   // не let а var

$("#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({
"background-color": "blue",
});
}
else(clickCount == 2)
{
$(".box").css(
{
width: "", // ширина элемента
height: "", // высота элемента
fontSize: "", // размер шрифта элемента
borderWidth: "", // ширина границ элемента
"background-color": "#FFFFFF",
}).text("");
clickCount = 0;    // обнуляем
}

}

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт