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

362

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

386

javascript

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

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

374

javascript

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

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

297

PHP

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

Есть php код:

285