Оптимизация кода и обратное действие

Question

Оптимизация кода и обратное действие

Рейтинг: 1Ответов: 2Опубликовано: 03.09.2014

Только начинаю изучать Jquery, и думается мне, что код слишком кривой и объёмный. Задача по клику на объект (span.calc) внутри блока div.product добавлять новый класс этому блоку, а также менять текст у span.calc и его класс. Плюс следующий блок за нашим div.product должен принимать класс next, это нужно для его позиционирования.

Визуально выглядит так:

https://yadi.sk/i/DNarvfUWavH9t

Код ниже, открытие по клику работает, классы тоже все, как надо. Вопрос в кривизне кода.

<script>
  $(document).ready(function(){
        $("span.calc").click(function() {
            $("div.product").removeClass("open next"); // закрываем все открытые блоки
            $(this).parent().parent().parent().toggleClass("open"); // задаём для div.product дополнительный класс open
            $(this).text("Свернуть"); // меняем текст у span.calc на «Свернуть»
            $(this).addClass("open"); // добавляем класс open для span.calc 
            $(this).parent().parent().parent().next("div.product").addClass("next"); // добавляем класс next для следующего div.product
        });

  });
  </script>

Попинайте, плз.

И основной вопрос: как сделать обратное действие по клику (закрытие блока)? Пробовал писать так:

<script>
  $(document).ready(function(){
        $("span.calc").click(function() {
            $("div.product").removeClass("open next"); 
            $(this).parent().parent().parent().toggleClass("open");
            $(this).text("Свернуть"); 
            $(this).addClass("open"); 
            $(this).parent().parent().parent().next("div.product").addClass("next");
        });
        $("span.calc.open").click(function() {
            $("div.product").removeClass("open next"); 
            $(this).parent().parent().parent().toggleClass("open");
            $(this).text("Рассчитать"); 
            $(this).removeClass("open");
          $(this).parent().parent().parent().next("div.product").removeClass("next");
        });
  });
  </script>

Не работает.

javascript jquery

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Как-то так можно сделать:

$(document).ready(function () {
    $("span.calc").click(function () {
        var product = $(this).parents('div.product').first(), //div.product 
            isopen = !product.hasClass('open'); //открываем ?
        product.removeClass('next').toggleClass("open") //у себя убрать .next, переключить open
             //у соседних продуктов убрать .next и .open поставить текст Рассчитать на кнопки
            .siblings('div.product').removeClass("open next").find('span.calc').text('Рассчитать'); 
        //у своей кнопки сделать текст Свернуть/Рассчитать
        $(this).text(isopen ? "Свернуть" : "Рассчитать"); 
        //если открываем, добавить .next к следующему продукту
        if (isopen) product.next("div.product").addClass("next"); 
    });
});

Обратите внимание, что для упрощения кода я немого поменял css:

было:

.content .product div.calc span.calc.open

стало:

.content .product.open div.calc span.calc

http://jsfiddle.net/oceog/58aqkhe0/3/

Answer 2

▲ 0

$(id).toggle(
function(){
//открываете
},
function(){
//закрываете
}
)

Оптимизация кода и обратное действие

Ответы