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

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

+2 ещё

Простой
Как ограничить доступ определенному пользователю в своем телеграмм боте?
- 1 подписчик
- 4 часа назад
- 38 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как сделать ширину блока по ширине контента?
- 1 подписчик
- 10 часов назад
- 46 просмотров
1

ответ
JavaScript

Простой
Как найти и сгруппировать элементы с одинаковым классом?
- 1 подписчик
- вчера
- 79 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как скроллить определенный блок Div?
- 1 подписчик
- вчера
- 134 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как написать текст на окружности и посчитать точки?
- 1 подписчик
- 26 дек.
- 96 просмотров
0

ответов
JavaScript

Средний
Как остановить весь скрипт js при выполнении условия tampermonkey?
- 1 подписчик
- 26 дек.
- 82 просмотра
2

ответа
JavaScript

Средний
.stopPropagation() на самом деле не останавливает распространение события?
- 1 подписчик
- 26 дек.
- 124 просмотра
1

ответ
JavaScript

Простой
Нужно ли проверять импорт модуля js на повторную загрузку?
- 1 подписчик
- 26 дек.
- 59 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у меня не может найти URL_TO_BOT?
- 1 подписчик
- 25 дек.
- 57 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 25 дек.
- 64 просмотра
2

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

Исправить ошибки в консольном интерфейсе с применением C# и NET

28 дек. 2024, в 22:21

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

Сделать бота

28 дек. 2024, в 21:56

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

Доработка Битрикс

28 дек. 2024, в 18:50

1200 руб./в час

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;    // обнуляем
}

}

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

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

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

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