2

Нужен javascript который будет делать следующее:
по клику на кнопку .step-1 .btn-no (Шаг-1), должен добавляться класс .hidden к первому tr в таблице. Тоже самое и с остальными - там где нажимают "нет", скрывается соответствующий tr в таблице.
Если на всех шагах нажали "нет", то во всех tr надо убрать класс hidden т.е. показать все tr.

.step-1,.step-2,.step-3,.step-4 {
  font-size: 1.4rem;
}
.btn-yes,.btn-no {
  display: inline;
  cursor: pointer;
  border-bottom: 1px dashed #000;
}
.btn-yes:hover {
  color: green;
  border-bottom: 1px dashed green;
}
.btn-no:hover {
  color: red;
  border-bottom: 1px dashed red;
}

table {
  margin-top: 30px;
  font-size:1.2rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="step-1">
  Шаг 1 -
  <div class="btn-yes"><span>да</span></div>
  <div class="btn-no"><span>нет</span></div>
</div>
<div class="step-2">
  Шаг 2 -
  <div class="btn-yes"><span>да</span></div>
  <div class="btn-no"><span>нет</span></div>
</div>
<div class="step-3">
  Шаг 3 -
  <div class="btn-yes"><span>да</span></div>
  <div class="btn-no"><span>нет</span></div>
</div>
<div class="step-4">
  Шаг 4 -
  <div class="btn-yes"><span>да</span></div>
  <div class="btn-no"><span>нет</span></div>
</div>


<table border="0" cellpadding="0" cellspacing="0">
  <tr><td>text 1</td></tr>
  <tr><td>text 2</td></tr>
  <tr><td>text 3</td></tr>
  <tr><td>text 4</td></tr>
</table>

1 ответ 1

2

Здравствуйте!

Обернуть .step-1,.step-2,.step-3,.step-4 родительским блоком и тогда:

<script>
$(document).ready(function(){
    $(".btn-no, .btn-yes").click(function(){
        var $this =  $(this),
            index = $this.parent().index(),
            $rows = $("table tr");

        if ($this.hasClass("btn-no")) {
            $rows.eq(index).addClass("hidden");
        } else {
            $rows.eq(index).removeClass("hidden");
        }

        if ($rows.length === $("table tr.hidden").length){
            $rows.removeClass("hidden");
        }
    });
});
</script>
5
  • Большое спасибо, подскажитте пожалуйста -если таблица и блок с да\нет, находятся в разных секциях, как быть?
    – Neka
    7 окт 2015 в 7:51
  • Таблица и блок с да\нет могут находится в разных секциях (естественно, нужно обращать внимание на селектор таблицы, чтобы выбирать именно ту, которая нам нужна). Единственное условие это обернуть это самый блок с да\нет в родительский блок (т.е. блоки .step-* должны быть помещены в конкретный блок, который будет являться родителем только для них). Это необходимо для того чтобы сопоставлять индексы tr и индексы блоков .step-*
    – kelt
    7 окт 2015 в 8:03
  • дело в том, что верстка немного другая prntscr.com/8ongbs общий блок получается .owl-wrapper, подскажите пожалуйста какие изменения нужно внести в скрипт?
    – Neka
    7 окт 2015 в 8:32
  • 1
    Тогда заменить строку index = $this.parent().index(), на index = $this.parents(".owl-item").index(),
    – kelt
    7 окт 2015 в 9:08
  • Огромное спасибо :)
    – Neka
    7 окт 2015 в 9:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.