我需要帮助修改下面的代码。
我有两个表，
- 表一有两行六列
- 表二有两行六列，每个单元格的颜色为红色或黄色，形成两个一致的形状。
我想在“表一”中的单元格与“表二”的一致形状及其颜色相匹配时显示警报。
*注意...您可以通过选择左上角的按钮之一(白色、黄色或红色)来更改单元格的颜色。
**有没有办法允许两个匹配表二的解决方案？我以一张图片为例。
jQuery(function() {
var brush = "white_block";
jQuery('input.block').on('click', function() {
brush = jQuery(this).data('brush');
});
function cellCheck() {
var reds = jQuery('#two .red_block').length,
yellows = jQuery('#two .yellow_block').length,
cells_colored = reds + yellows,
cells_total = jQuery('#two 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>
<body>
<br>Buttons:<br>
<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">
<br>
<br> Table One:
<table id="one">
<tr>
<td class="block white_block"></td>
<td class="block white_block"></td>
<td class="block white_block"></td>
</tr>
<tr>
<td class="block white_block"></td>
<td class="block white_block"></td>
<td class="block white_block"></td>
</tr>
</table>
<br>
<br> Table Two:
<table id="two">
<tr>
<td class="block yellow_block"></td>
<td class="block yellow_block"></td>
<td class="block red_block"></td>
</tr>
<tr>
<td class="block yellow_block"></td>
<td class="block red_block"></td>
<td class="block red_block"></td>
</tr>
</table>
<br>
<br>
</body>最佳答案
jQuery(function() {
var brush = "white_block";
jQuery('input.block').on('click', function() {
brush = jQuery(this).data('brush');
});
function cellCheck() {
$one = $("#one").html().replace(/\s/g,'');
$two = $("#two").html().replace(/\s/g,'');
$three = $("#three").html().replace(/\s/g,'');
if($one === $two){
alert("match with two");
}
if($one === $three){
alert("match with three");
}
}
jQuery('td').on('click', function() {
jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush);
cellCheck();
getsolution();
});
function getsolution(){
$("#two").clone().each(function() {
var $this = $(this);
var newrows = [];
var firstTr = '';
var i = 0;
$this.find("tr").each(function(){
if(i == 0){
firstTr = "<tr>"+$(this).html()+"</tr>";
i++;
}else{
$("#three").html("<tr>"+$(this).html()+"</tr>");
$("#three").append(firstTr);
}
});
});
}
getsolution();
});.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>
<body>
<br>Buttons:<br>
<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">
<br>
<br> Table One:
<table id="one">
<tr>
<td class="block white_block"></td>
<td class="block white_block"></td>
<td class="block white_block"></td>
</tr>
<tr>
<td class="block white_block"></td>
<td class="block white_block"></td>
<td class="block white_block"></td>
</tr>
</table>
<br>
<br> Table Two:
<table id="two">
<tr>
<td class="block yellow_block"></td>
<td class="block yellow_block"></td>
<td class="block red_block"></td>
</tr>
<tr>
<td class="block yellow_block"></td>
<td class="block red_block"></td>
<td class="block red_block"></td>
</tr>
</table>
<br>
<br>
Three
<table id="three">
</table>
</body>检查两个表格 html 是否相同的最简单方法。您可以获取 HTML 并使用正则表达式替换其中的所有空格。现在检查两个字符串是否相等。
关于javascript - 当两个表格颜色一致模式匹配时显示警报，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49422536/