Question

我的代码存在问题。我想更改输入按钮的样式大小（位于底部的白色，蓝色和黄色....），而不会影响代码的结果。

代码将表格1的单元格颜色与其他表格进行比较，并在匹配时显示警告。
您可以通过选择其中一个底部按钮（白色，蓝色或黄色）来更改表格单元格的颜色。请帮忙......

// JavaScript Document
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, '');
		$four = $("#four").html().replace(/\s/g, '');
		$five = $("#five").html().replace(/\s/g, '');

		if ($one === $two) {
			alert("match with two");
		}
		if ($one === $three) {
			alert("match with three");
		}
		if ($one === $four) {
			alert("match with four");
		}
		if ($one === $five) {
			alert("match with five");
		}
	}
	jQuery('td').on('click', function () {
		jQuery(this).removeClass('white_block blue_block yellow_block').addClass(brush);
		cellCheck();
	});
});

.block {
	border: thin solid #000000;
	width: 59px;
	height: 57px;
	box-shadow: 1px 1px 0px #d9d9d9,  2px 2px 0px #d9d9d9,  3px 3px 0px #d9d9d9,  4px 4px 0px #d9d9d9,  5px 5px 0px #d9d9d9,  6px 6px 0px #d9d9d9;
}
.button {
	border: thin solid #000000;
	width: 49px;
	height: 47px;
}
.white_block {
	background-color: #FFFFFF;
}
.blue_block {
	background-color: #0066cc;
}
.green_block {
	background-color: #00b300;
}
.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>
<!--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>
<input type="button" class="block white_block" data-brush="white_block">
<input type="button" class="block blue_block" data-brush="blue_block">
<input type="button" class="block yellow_block" data-brush="yellow_block">
<div style="display:none"> <br>
  Table Two:
  <table id="two">
    <tr>
      <td class="block yellow_block"></td>
      <td class="block yellow_block"></td>
      <td class="block blue_block"></td>
    </tr>
    <tr>
      <td class="block yellow_block"></td>
      <td class="block blue_block"></td>
      <td class="block blue_block"></td>
    </tr>
  </table>
  <br>
  <br>
  Table Three:
  <table id="three">
    <tr>
      <td class="block blue_block"></td>
      <td class="block blue_block"></td>
      <td class="block yellow_block"></td>
    </tr>
    <tr>
      <td class="block blue_block"></td>
      <td class="block yellow_block"></td>
      <td class="block yellow_block"></td>
    </tr>
  </table>
  <br>
  <br>
  Table Four:
  <table id="four">
    <tr>
      <td class="block yellow_block"></td>
      <td class="block blue_block"></td>
      <td class="block blue_block"></td>
    </tr>
    <tr>
      <td class="block yellow_block"></td>
      <td class="block yellow_block"></td>
      <td class="block blue_block"></td>
    </tr>
  </table>
  <br>
  <br>
  Table Five:
  <table id="five">
    <tr>
      <td class="block blue_block"></td>
      <td class="block yellow_block"></td>
      <td class="block yellow_block"></td>
    </tr>
    <tr>
      <td class="block blue_block"></td>
      <td class="block blue_block"></td>
      <td class="block yellow_block"></td>
    </tr>
  </table>
</div>
</body>

Answer 1

您只需在输入按钮中添加一个额外的类名称即可。

<input type="button" class="block white_block wide_input" data-brush="white_block">

并在样式表中修改你想要的css。

JSFiddle

输入按钮样式与JavaScript代码冲突

1 个答案: