Question

我的代码存在问题。警报在“Dreamweaver实时视图”CC 18中不起作用。它在jsfiddle或codepen中工作正常。除警报外，其他所有内容似乎都在Dreamweaver中工作。我相信js脚本被正确引用。我希望这是一个离线项目。请帮忙。

代码将表格1的单元格颜色与其他表格进行比较，并在匹配时显示警告。
您可以通过选择左上角的按钮（白色，黄色或红色）来更改表格单元格的颜色。
以下代码正是我在Dreamweaver中的代码。

我非常感谢任何帮助。感谢。

// js/index.js
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 yellow_block red_block').addClass(brush);
		cellCheck();
	});
});

/* css/style.css
*/

.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>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Blocks</title>
<link rel="stylesheet" href="css/style.css">
</head>

<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>
Table Three:
<table id="three">
  <tr>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block yellow_block"></td>
  </tr>
  <tr>
    <td class="block red_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 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 red_block"></td>
  </tr>
</table>
<br>
<br>
Table Five:
<table id="five">
  <tr>
    <td class="block red_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
  </tr>
  <tr>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block yellow_block"></td>
  </tr>
</table>
</body>
<script  src="js/jquery.min_2.js"></script>
<script  src="js/index.js"></script>
</html>

Javascript警报未在“Dreamweaver实时视图”中显示

0 个答案: