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用户都不能完成）。

这是完全可读的，尽管＆＃34;只是＆＃34; 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>

仍然很难看。

Answer 2

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

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

然后，仅将一个事件侦听器（而不是每个id一个）绑定到.link类。在外部JS文件中使用此代码：

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

Answer 3

尝试这个

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

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

3 个答案: