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

我使用php生成一个表，该表有多个链接和div，如下图所示，每个链接和div都有一个唯一的id。单击链接会显示div。这可以用jQuery重新编码吗？完整的代码有很多反斜杠和onclick，非常难看

<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>

---

不是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>

还是很难看。

试试这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<a href = '#!' class = 'link' id = 'link<?php echo $id; ?>' >click here</a>
<div class = 'box' id = 'box<?php echo $id; ?>'>content here</div>
<script>    
$( ".link" ).click(function() {
    this.style.display = 'block';
    //this.style.display = 'none';
});
</script>

---

这是一种方法，将HTML结构更改为：

<a href='#!' class='link' data-box='#box".$id."'>click here</a>
<div class='box' id='box".$id."'>content here</div>

---

是的，请在jQuery中尝试转换，然后发现任何问题，然后在此处询问。当然可以。你尝试过什么？你从哪里得到$id变量？这不是一个纯JavaScription，在旧的浏览器中不起作用。如果您想支持它们，请使用jQuery。@Rudi:。我不关心旧的浏览器，你也不应该。也就是说，我不是反对jQuery，我自己也广泛使用它，而是为了良好的编程实践，这是OP问题的真正问题。当客户和他们的客户关心较旧的浏览器时，你也应该这样做。OP使用jQuery并要求在jQuery中重新编码。@Rudi：作为对比，我确实提供了一个jQuery解决方案。OP的问题基本上是如何使它更漂亮，而jQuery是一个XY问题。我所做的只是说明事实。另一方面，您的解决方案（我投了赞成票）将两个问题（关注点分离和JavaScript->jQuery升级）混为一谈，这可能会让OP对jQuery的确切含义产生混淆。我更喜欢这一点——我无法从$id得出这将是一个循环的结论。我现在觉得自己很傻P

$('.link').on('click', function (e) {
    e.preventDefault();
    var box = $(this).data('box');
    $(box).show();
});