他们说HTML中的javascript代码被认为是不好的做法，如何解决这个问题

所以，我知道将javascript混合到HTML中是不好的，即使是在头脑中也是如此。但是让我们看看这个代码（我想从列表中删除项目）

.
.
.
<div>item1 <a href="#" onclick="return deleteThisItemById (1);">delete me</a><br />
<div>item4 <a href="#" onclick="return deleteThisItemById (4);">delete me</a><br />
<div>item5 <a href="#" onclick="return deleteThisItemById (5);">delete me</a><br />
.
.
.

此列表由PHP生成。deleteThisItemById（）位于外部.js文件中。这仍然被认为是糟糕的吗？如果是这样，什么是规范的解决方案？jQuery和原始javascript都是可以接受的。

$(function() {
  $('a#my_id1').click(function() {
    var myId = $(this).attr('id');
    return deleteThisItemByID(myId);
  });
});
<div>
    item1 
    <a id="my_id1" href="#">delete me</a>
</div>

顺便说一下，你的HTML是无效的。您的div标记嵌套不正确。

简单。。。为要删除的项目指定一个类或id（如果只有一个项目，则仅使用id）

<div>item1 <a href="#" class='deleteMe'>delete me</a><br /></div>
<div>item4 <a href="#" class='deleteMe'>delete me</a><br /></div>
<div>item5 <a href="#" class='deleteMe'>delete me</a><br /></div>

然后用jQuery 瞄准元素

$('.deleteMe').on('click', function(event) {
    $(this).remove();
});

注意。。。如果要删除整个div，请使用以下选择器：

$('.deleteMe').closest('div').on('click', function(event) {
    $(this).remove();
});

您可以使用addEventListener来完成此操作。那么你的html:中就没有js代码了

var elems = document.querySelectorAll("div.removable");
for(var i=0;i<elems.length;i++){      
    elems[i].querySelector("a").addEventListener("click",function(e){
        var toRemove = this.parentNode;
        var parent = toRemove.parentNode;
        parent.removeChild(toRemove);
    },false);
}

然而，我对div进行了迭代，所以我为此添加了一个类：

<div>
    <div  class="removable">item1 <a href="#">delete me</a></div><br />
    <div  class="removable">item2 <a href="#">delete me</a></div><br />
    <div  class="removable">item2 <a href="#">delete me</a></div><br />
</div>

看看这个小提琴

我喜欢将id和类似的元数据存储在表示这些对象的dom元素的"data-"属性中。

在这种情况下，我通常会使用类似的设置

<ul class="posts">
  <li class="post" data-post="####">
    <p>content...</p>
    <ul class="actions">
      <li>
        <a class="delete">delete</a>
      </li>
    </ul>
  </li>
</ul>

然后在页面底部的.js文件中：

$('.posts').on('click', '.actions .delete',
function() {
  // which post should be deleted?
  var $post = $(this).closest('.post');
  // remove the DOM element
  $post.remove();
  // some sort of ajax operation
  $.ajax({
    // url, dataType, etc
    data: { post_id: $post.data('id') }
  });
});

这一个处理程序将应用于主列表中的所有".action.delete"元素，这意味着如果您想添加一个使用ajax修改或向列表添加时间的加载程序或分页，那么这一个事件处理程序仍然可以很好地工作。

相关内容

最新更新

热门标签：