Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Работа if else (https://javascript.ru/forum/misc/76151-rabota-if-else.html)

knhoman 09.12.2018 15:49

Работа if else
 
Добрый день.
Хочу подключить на странице сайта кнопку, которая разворачивает и сворачивает контейнер div.
С этими функциями она справляется, но по отдельности. Почему при использовании if..else выполняются подряд все действия, а не только какое-то одно. Подскажите, пожалуйста, в чем может быть дело?

Изначально объект #show-more имеет текст "Показать еще".

<script>
$('#show-more').click(function() {
var text = document.getElementById("show-more").textContent;
alert (text);
if (text == "Показать еще" ) {
$("#show-more").text("Свернуть");
} else {
$("#show-more").text("Теперь так");
}
});
</script>

laimas 09.12.2018 16:07

$('#show-more').click(function() {
    this.textContent = this.textContent=='Показать еще' ? 'Свернуть' : 'Теперь так'
})


Но что после первого щелчка будет исполняться, если текста 'Показать еще' элемент более не будет иметь?

knhoman 09.12.2018 16:26

Нет, вообще вот так должно быть:

<script>
$('#show-more').click(function() {
var text = document.getElementById("show-more").textContent;
if (text == "Показать еще" ) {
$("#show-more").text("Свернуть");
$("#slider-block").css({"height: 100%"});
} else {
$("#show-more").text("Показать еще");
$("#slider-block").css({"height: 30%"});
}
});
</script>


Мне просто непонятен механизм: почему по одному клику срабатывают оба действия на разные условия.

upd. Ваш пример я попробовал, тоже самое: подряд выполняются оба действия.

рони 09.12.2018 16:38

Цитата:

Сообщение от knhoman
почему по одному клику

возможно это не так и кликов больше.
сделайте минимальный макет.

laimas 09.12.2018 17:04

Цитата:

Сообщение от knhoman
вот так должно быть

Так быть не должно. :) В обработчике уже доступен элемент как this, либо в jQuery можно запомнить, затем использовать:

var btn = $('#show-more').click(function() {
     var text = btn.text();
     if (text == "Показать еще" ) {
        btn.text("Свернуть");
     .....


Постоянно получать jquey объект, это плохо. А тернарный оператор позволяет более лаконично это записать. Можно текстом и не заниматься, например:

<style>
#show-more:after {
    content: 'Показать еще';
}

#show-more.open:after {
    content: 'Свернуть';
}

.panel {
    display: none;
}
</style>

<span id="show-more"></span>
<div class="panel">Что-то</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#show-more').click(function() {
    $(this).toggleClass('open').next().slideToggle();
})
</script>

knhoman 09.12.2018 17:11

Цитата:

Сообщение от рони (Сообщение 500121)
возможно это не так и кликов больше.
сделайте минимальный макет.

И правда, проверил на jsfiddle.net, работает, как и должно. Спасибо.
Почему происходит два клика. Только теперь непонятно, почему. Наверное из-за особенностей плагина. Я этот код пытаюсь вставить на страницу плагина-слайдера.

knhoman 09.12.2018 17:16

Цитата:

Сообщение от laimas
Так быть не должно.

Согласен, что у меня "грязно" написано по незнанию.
Второй ваш пример я делал изначально (но без использования ajax), но он немного не подходит по сути.
У меня есть плагин-слайдер, в котором на каждом слайде есть текст разной длины. Хотелось бы сделать так: каждый слайд изначально отображает только, например, 300px от всей высоты, а после нажатия на кнопку div полностью разворачивается/сворачивается. И не хотелось бы делать отдельный div, который скрывается под кнопкой.

laimas 09.12.2018 17:24

Это лишь пример, вам никто не запрещает помещать раскрываемую панель где угодно. Текст на кнопке в примере изменяется исключительно стилями переключением - $(this).toggleClass('open'). Если эта панель имеет родителя от высоты которого ее высота выражена в процентах, то сворачивать/разворачивать ее также можно переключая класс - $("#slider-block").toggleClass('class_name'), по умолчанию в css ее высота указана 30%, а при добавлении класса 100%. Хотя можете и $("#slider-block").css(....).

knhoman 09.12.2018 21:12

Большое спасибо за ответы. Более или менее разобрался.
Однако вся проблема, оказывается, была в другом: всегда вместо одного происходит два нажатия, скорее всего это из-за плагина.
И как это уже исправлять вот совсем никаких мыслей :)

j0hnik 09.12.2018 21:15

knhoman,
кидай ссылку поможем


Часовой пояс GMT +3, время: 13:16.