Добавление класса по клику + проверка на наличие класса и добавление класса другому div

285
02 ноября 2017, 08:26

У меня немного запутанное задание: нужно чтобы при клике на input.input-checkbox другому div.tr добавлялся класс checked, при этом еще одному диву нужно присваивать class="fixed", если у другого есть class="checked"

Я тут наворотила по моему, но первый скрипт работает правильно и нормально... а вот с добавлением .fixed что- то туплю

Структура примерно такая

$("input.input-checkbox").click(function() { 
  var par = $(this).parent("div"); 
  if (par.hasClass("checked")) 
    par.removeClass("checked"); 
  else 
    par.addClass("checked"); 
}); 
 
 
 
if ($('.tr').hasClass('checked')) { 
  $('.finish') 
    .addClass('fixed'); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="tr"><input class="input-checkbox" type="checkbox"></div> 
<div class="tr"><input class="input-checkbox" type="checkbox"></div> 
<div class="tr"><input class="input-checkbox" type="checkbox"></div> 
<div class="finish"></div>

Answer 1
$("input.input-checkbox").click(function(){
var par = $(this).parent("div");
if (par.hasClass("checked"))
    par.removeClass("checked");
else
    par.addClass("checked"); 
if ($('.tr').hasClass('checked')) 
{
    $('.finish').addClass('fixed');
} else {
    $('.finish').removeClass('fixed');
}
});

тогда попробуйте так, просто перенеся скобочку от .click(function(){ ... }); в самый конец, и добавив Ваш второй скрипт в кучу к первому.

Answer 2

Например:

$(".input-checkbox").click(function() { 
  var $this = $(this), 
      tr = $this.parent(".tr"), 
      finish = $('.finish'); 
   
  if (!tr.hasClass("checked")){ 
    tr.addClass("checked"); 
    finish.addClass('fixed'); 
  } else { 
    tr.removeClass("checked"); 
    finish.removeClass('fixed'); 
  } 
});
/* Для наглядности */ 
 
.checked { 
  border: 1px solid red; 
} 
 
 
.finish { 
  height: 20px; 
} 
 
.fixed { 
  border: 1px solid #000; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="tr"><input class="input-checkbox" type="checkbox"></div> 
<div class="tr"><input class="input-checkbox" type="checkbox"></div> 
<div class="tr"><input class="input-checkbox" type="checkbox"></div> 
<div class="finish"></div>

READ ALSO
Как правильно доработать скрипт?
javascript

Как правильно доработать скрипт?

Добрый день! Помогите, пожалуйста, доработать скриптБлок

 312
Почему возвращается объект?
javascript

Почему возвращается объект?

Помогите пожалуйста понять что детально происходит при таком вызове:

 306
Распознавание голоса Web Kit Speech Recognition не работает
javascript

Распознавание голоса Web Kit Speech Recognition не работает

Здравствуйте, я добавил на сайт технологию Web Kit Speech Recognition API, эта технология способна распознавать голосМой сайт находится на локальном сервере,...

 231
PHP качество кода
PHP

PHP качество кода

Есть php код:

 223