0

Сразу оговорюсь, что это условный пример - чтобы было максимально понятно. Допустим, есть 4 дива с пустым value (дивов может быть любое количество). По клику на каждый из дивов его value становится true. Как отловить момент, когда value всех дивов оказываются равны true?

В этот момент нужно вывести какое-то оповещение типа alert('Good!');

$('div').click(function(){
  $(this).attr('value', true);
  console.log($(this).attr('value'));
});
div {
  width: 70px;
  height: 35px;
  border: 1px solid black;
  display: inline-block;
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<div name="one" value=""></div>
<div name="two" value=""></div>
<div name="three" value=""></div>
<div name="four" value=""></div>

2
  • А разве у div'а может быть атрибут value? Commented 12 янв. 2018 в 15:44
  • 1
    if ($("div[value='']").length == 0) { ... }
    – user176262
    Commented 12 янв. 2018 в 15:50

4 ответа 4

2

Если значение value меняется при клике на div то логично там же и смотреть на все дивы и на значение их value, примерно так :

$('.atata').click(function() {
  $(this).attr('value', true);

  var allTrue = true;
  $('.atata').each(function() {
    if (!$(this).attr('value'))
      allTrue = false;
  });

  if (allTrue)
    console.log('all true');
});
.atata {
  width: 70px;
  height: 35px;
  border: 1px solid black;
  display: inline-block;
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<div class="atata" name="one" value=""></div>
<div class="atata" name="two" value=""></div>
<div class="atata" name="three" value=""></div>
<div class="atata" name="four" value=""></div>

1

$('.elements>div').click(function(){
  $(this).attr('value', true);
  console.log($(this).attr('value'));
  var showAlert = 1;
  $('.elements>div').each(function(index, elem){
    if($(elem).attr('value') != 'true'){
      showAlert = 0;
    }
  });
  if(showAlert == 1){
    alert('Good!');
  }
});
div {
  width: 70px;
  height: 35px;
  border: 1px solid black;
  display: inline-block;
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<div class="elements">
  <div name="one" value=""></div>
  <div name="two" value=""></div>
  <div name="three" value=""></div>
  <div name="four" value=""></div>
</div>

1
  • Вот! А я всё никак не мог понять, почему у меня .each не хочет корректно работать: (index,elem) - это именно то, чего мне не хватало. Спасибо! Commented 13 янв. 2018 в 10:44
1

$('div').click(function(){
  $(this).attr('value', true);
  $(this).text(true); // remove
  if ($("div[value='']").length == 0) {
    $("span").text("All set.");
  }
});
div {
  width: 70px;
  height: 35px;
  border: 1px solid black;
  display: inline-block;
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<div name="one" value=""></div>
<div name="two" value=""></div>
<div name="three" value=""></div>
<div name="four" value=""></div>

<span></span>

0

Как вариант, дайте дивам общий класс, и при клике проверяйте необходимое значение для каждого из них и сравнивайте между собой.

<div class="same-block" name="one" value=""></div>
<div class="same-block" name="two" value=""></div>
...
2
  • Ну, вопрос и был в том, КАК ИМЕННО сравнивать между собой :) Commented 13 янв. 2018 в 10:47
  • Проверяете значения в цикле и первое-же говорит о том, что условие не выполнено Commented 13 янв. 2018 в 10:50

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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