1

因此，我知道将 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 也是如此。

4

4 回答 4

4 
$(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 标签嵌套不正确。

于 2013-02-18T01:08:41.583 回答
4

简单...为您要删除的项目提供一个类或 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();
});
于 2013-02-18T01:09:25.867 回答
2

你可以使用 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>

看看这个小提琴

于 2013-02-18T01:25:15.967 回答
1

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

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

<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 修改或添加时间到列表的加载程序或分页，一个事件处理程序仍然可以很好地工作.

于 2013-02-18T01:38:39.103 回答