主页 / 问题 / 769924
Accepted
humster_spb
Asked:2020-01-12 23:28:09 +0000 UTC2020-01-12 23:28:09 +0000 UTC

Jquery：如何捕捉所有 div 的值相等的时刻？

  • 772

我将立即保留这是一个有条件的示例 - 以便尽可能清楚。假设有 4 个 div 的值为空（可以有任意数量的 div）。通过单击每个 div，其值变为 true。如何捕捉所有 div 的值都等于 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>

javascript

4 个回答

  1. value如果单击它时值发生变化，div那么查看所有 div 及其 value 是合乎逻辑的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>

    • 2
  2. Best Answer

    $('.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 

  3. $('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>

    • 1

  4. 或者，给 div 一个公共类，单击时检查每个 div 所需的值并相互比较。

    <div class="same-block" name="one" value=""></div>
<div class="same-block" name="two" value=""></div>
...
    • 0

相关问题