Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.12.2018, 15:49
Новичок на форуме
Отправить личное сообщение для knhoman Посмотреть профиль Найти все сообщения от knhoman
 
Регистрация: 09.12.2018
Сообщений: 5

Работа 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>

Последний раз редактировалось knhoman, 09.12.2018 в 16:33.
Ответить с цитированием
  #2 (permalink)  
Старый 09.12.2018, 16:07
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,170

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


Но что после первого щелчка будет исполняться, если текста 'Показать еще' элемент более не будет иметь?
Ответить с цитированием
  #3 (permalink)  
Старый 09.12.2018, 16:26
Новичок на форуме
Отправить личное сообщение для knhoman Посмотреть профиль Найти все сообщения от knhoman
 
Регистрация: 09.12.2018
Сообщений: 5

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

<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. Ваш пример я попробовал, тоже самое: подряд выполняются оба действия.

Последний раз редактировалось knhoman, 09.12.2018 в 16:30.
Ответить с цитированием
  #4 (permalink)  
Старый 09.12.2018, 16:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,559

Сообщение от knhoman
почему по одному клику
возможно это не так и кликов больше.
сделайте минимальный макет.
Ответить с цитированием
  #5 (permalink)  
Старый 09.12.2018, 17:04
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,170

Сообщение от 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>

Последний раз редактировалось laimas, 09.12.2018 в 17:06.
Ответить с цитированием
  #6 (permalink)  
Старый 09.12.2018, 17:11
Новичок на форуме
Отправить личное сообщение для knhoman Посмотреть профиль Найти все сообщения от knhoman
 
Регистрация: 09.12.2018
Сообщений: 5

Сообщение от рони Посмотреть сообщение
возможно это не так и кликов больше.
сделайте минимальный макет.
И правда, проверил на jsfiddle.net, работает, как и должно. Спасибо.
Почему происходит два клика. Только теперь непонятно, почему. Наверное из-за особенностей плагина. Я этот код пытаюсь вставить на страницу плагина-слайдера.
Ответить с цитированием
  #7 (permalink)  
Старый 09.12.2018, 17:16
Новичок на форуме
Отправить личное сообщение для knhoman Посмотреть профиль Найти все сообщения от knhoman
 
Регистрация: 09.12.2018
Сообщений: 5

Сообщение от laimas
Так быть не должно.
Согласен, что у меня "грязно" написано по незнанию.
Второй ваш пример я делал изначально (но без использования ajax), но он немного не подходит по сути.
У меня есть плагин-слайдер, в котором на каждом слайде есть текст разной длины. Хотелось бы сделать так: каждый слайд изначально отображает только, например, 300px от всей высоты, а после нажатия на кнопку div полностью разворачивается/сворачивается. И не хотелось бы делать отдельный div, который скрывается под кнопкой.
Ответить с цитированием
  #8 (permalink)  
Старый 09.12.2018, 17:24
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,170

Это лишь пример, вам никто не запрещает помещать раскрываемую панель где угодно. Текст на кнопке в примере изменяется исключительно стилями переключением - $(this).toggleClass('open'). Если эта панель имеет родителя от высоты которого ее высота выражена в процентах, то сворачивать/разворачивать ее также можно переключая класс - $("#slider-block").toggleClass('class_name'), по умолчанию в css ее высота указана 30%, а при добавлении класса 100%. Хотя можете и $("#slider-block").css(....).
Ответить с цитированием
  #9 (permalink)  
Старый 09.12.2018, 21:12
Новичок на форуме
Отправить личное сообщение для knhoman Посмотреть профиль Найти все сообщения от knhoman
 
Регистрация: 09.12.2018
Сообщений: 5

Большое спасибо за ответы. Более или менее разобрался.
Однако вся проблема, оказывается, была в другом: всегда вместо одного происходит два нажатия, скорее всего это из-за плагина.
И как это уже исправлять вот совсем никаких мыслей
Ответить с цитированием
  #10 (permalink)  
Старый 09.12.2018, 21:15
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,552

knhoman,
кидай ссылку поможем
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вакансия: Программист IOS, работа в офисе,г.Ростов-на-Дону Анна NikitaOnline Работа 0 21.03.2016 18:45
Javascript фронтенд разработчик(долгосрочная, удаленная работа) cpp Работа 11 16.09.2012 12:04
Постоянная работа / Front-end / Москва kooper Работа 4 29.09.2011 22:06