满足条件后显示警报

时间：2016-08-14 15:06:11

标签： javascript jquery html css

我需要帮助修改下面的代码。我希望它只在满足两个条件时显示警告。

  1. 表中的所有单元格都已应用了背景色
  2. 红细胞数等于黄细胞数 - 已完成

    3. 以下代码符合第2项要求，我需要有关第1项要求的帮助

    jQuery(function() {

  var brush = "white_block";

  jQuery('input.block').on('click', function() {
    brush = jQuery(this).data('brush');
  });

  jQuery('td').on('click',function() {

    jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush);

    var reds = jQuery('.red_block').length,
        yellows = jQuery('.yellow_block').length;

    if (reds == yellows) {
      setTimeout(function() {alert("Finished!")}, 100);
    }

  });

});
    .block {
  border: thin solid #000000;
  width: 59px;
  height: 57px;
}
.white_block {
  background-color: #FFFFFF;
}
.red_block {
  background-color: #FF0000;
}
.yellow_block {
  background-color: #FFFF00;
}

table {
  margin:1em 0 0;
}
    <html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="block white_block" data-brush="white_block">
<input type="button" class="block yellow_block" data-brush="yellow_block">
<input type="button" class="block red_block" data-brush="red_block">

<table>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
</table>

</html>

3 个答案:

答案 0 :(得分：1)

您可以创建一个自定义函数来检查您的条件，并在单击单元格的每个项目中调用它。

该功能将检查总细胞数，有多少颜色以及红色是否等于黄色：

jQuery(function() {
  var brush = "white_block";
  jQuery('input.block').on('click', function() {
    brush = jQuery(this).data('brush');
  });
  function cellCheck() {
    var reds = jQuery('#cellsTable .red_block').length,
        yellows = jQuery('#cellsTable .yellow_block').length,
        cells_colored = reds + yellows,
        cells_total = jQuery('#cellsTable td').length;
    
    // condition 1: all colored 
    if (cells_colored == cells_total) {
      setTimeout(function() {alert("All Colored");}, 100);
    }
    // condition 2: equal colors
    if (reds == yellows) {
      setTimeout(function() {alert("Equal colors");}, 100);
    }
    // condition 3: both conditions
    if (cells_colored == cells_total && reds == yellows) {
      setTimeout(function() {alert("Finished!");}, 100);
    }
  }
  jQuery('td').on('click', function() {
    jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush);
    cellCheck();
  });
});
.block {
  border: thin solid #000000;
  width: 59px;
  height: 57px;
}
.white_block {
  background-color: #FFFFFF;
}
.red_block {
  background-color: #FF0000;
}
.yellow_block {
  background-color: #FFFF00;
}
table {
  margin: 1em 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="block white_block" data-brush="white_block">
<input type="button" class="block yellow_block" data-brush="yellow_block">
<input type="button" class="block red_block" data-brush="red_block">

<table id="cellsTable">
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
</table>

答案 1 :(得分：0)

您需要将所有td与课程block和所有td与课程red_block或yellow_block一起计算，然后将其比较如下。

var brush = "white_block";

$('input.block').on('click', function () {
    brush = $(this).data('brush');
});

$('td').on('click', function () {

    $(this).removeClass('white_block yellow_block red_block').addClass(brush);

    var all = $('td.block').length,
      colored = $('td.red_block, td.yellow_block').length,
      reds = $('td.red_block').length,
      yellows = $('td.yellow_block').length;

    if (reds == yellows && all == colored) {
        setTimeout(function () {
            alert("Finished!")
        }, 100);
    }
});

<强> Updated Fiddle

答案 2 :(得分：0)

reds = jQuery('.red_block').length＆amp; yellows= jQuery('.yellow_block').length会找到包含red_block个类的所有元素。 yellow_block除了。{我将此更改为reds = jQuery('td.red_block').length＆amp; yellows= jQuery('td.yellow_block').length分别只找到td s。

1.查找td.red_block =＆gt;的总数reds＆amp; td.yellow_block =＆GT; yellows

2.计算总共reds＆amp; yellows =＆gt; totalbg。

3.查找所有td与课程.block =＆gt;的总和totaltd;

4.如果reds==yellows和totalbg==totaltd，则显示alert()

＆＃13;
＆＃13; 
jQuery(function() {

  var brush = "white_block";

  jQuery('input.block').on('click', function() {
    brush = jQuery(this).data('brush');
  });

  jQuery('td').on('click',function() {

    jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush);

    var reds = jQuery('td.red_block').length,
        yellows = jQuery('td.yellow_block').length,
        totaltd=$('td.block').length,
        totalbg = reds + yellows;
        

    if (reds == yellows && totalbg==totaltd) {
      setTimeout(function() {alert("Finished!")}, 100);
    }

  });

});
＆＃13; 
.block {
  border: thin solid #000000;
  width: 59px;
  height: 57px;
}
.white_block {
  background-color: #FFFFFF;
}
.red_block {
  background-color: #FF0000;
}
.yellow_block {
  background-color: #FFFF00;
}

table {
  margin:1em 0 0;
}
＆＃13; 
<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="block white_block" data-brush="white_block">
<input type="button" class="block yellow_block" data-brush="yellow_block">
<input type="button" class="block red_block" data-brush="red_block">

<table>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
</table>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题