这个javascript代码可以在jQuery中重写吗？

Question

我使用php生成一个包含多个链接和div的表,如下所示,每个都有一个唯一的id.单击该链接可显示div.可以用jQuery重新编码吗？所有反斜杠和onclicks的完整代码都非常难看.

<a href = '#!' class = 'link' id = 'link".$id."' onclick = 'document.getElementById(\"box".$id."\").style.display = \"block\";'>click here</a>
<div class = 'box' id = 'box".$id."'>content here</div>

Answer 1

这不是JavaScript让它变得丑陋(而jQuery很漂亮); 缺乏分离的关注使得它变得丑陋.隔离你的JavaScript,并通过注册一个监听器来激活它,而不是直接作为你的HTML上的代码串(任何严重的JS用户都不能完成).

这是完全可读的,尽管是"只是"JavaScript:

<a href='#!' class='link' id='link<?php echo $id; ?>'>click here</a>
<div class='box' id='box<?php echo $id; ?>'>content here</div>
<script>
  var link = document.getElementById('link<?php echo $id; ?>');
  var box = document.getElementById('box<?php echo $id; ?>');

  link.addEventListener('click', function(evt) {
    box.style.display = 'block';
  });
</script>

另一方面,这是您使用jQuery的原始代码:

<a href = '#!' class = 'link' id = 'link".$id."' onclick = '$(\"#box".$id."\").css(\"display\", \"block\");'>click here</a>
<div class = 'box' id = 'box".$id."'>content here</div>

仍然很难看.