使用jQuery从html元素传递参数答案

【问题标题】：Passing in parameter from html element with jQuery使用jQuery从html元素传递参数
【发布时间】：2010-09-12 20:42:24
【问题描述】：

我是第一次使用 jQuery，需要一些帮助。我的 html 如下所示：

<div id='comment-8' class='comment'>
    <p>Blah blah</p>
    <div class='tools'></div>
</div>

<div id='comment-9' class='comment'>
    <p>Blah blah something else</p>
    <div class='tools'></div>
</div>

我正在尝试使用 jQuery 将跨度添加到单击时调用各种函数的 .tools div。这些函数需要接收父评论的 id（整个 'comment-8' 或只是 '8' 部分），以便我可以显示表单或有关评论的其他信息。

到目前为止，我所拥有的是：

<script type='text/javascript'>

    $(function() {
        var actionSpan = $('<span>[Do Something]</span>');
        actionSpan.bind('click', doSomething);

        $('.tools').append(actionSpan);
     });

     function doSomething(commentId) { alert(commentId); }

</script>

我不知道如何为 doSomething 填充 commentId 参数。也许我应该传递对单击的跨度的引用而不是 id。那可能也不错，但我不确定如何实现。

谢谢，布赖恩

【问题讨论】：

标签： javascript jquery

【解决方案1】：

使用事件对象作为第一个参数调用事件回调，您不能以这种方式传递其他内容。这个事件对象有一个target 属性，它引用了它被调用的元素，而this 变量是对事件处理程序附加到的元素的引用。因此，您可以执行以下操作：

function doSomething(event)
{
    var id = $(event.target).parents(".tools").attr("id");
    id = substring(id.indexOf("-")+1);
    alert(id);
}

...或：

function doSomething(event)
{
    var id = $(this).parents(".tools").attr("id");
    id = substring(id.indexOf("-")+1);
    alert(id);
}

【讨论】：

【解决方案2】：

要从跨度到周围的 div，你可以使用<tt>parent()</tt>（如果你知道确切的关系），像这样：<tt>$(this).parent().attr('id')</tt>; 或者如果结构可能嵌套更深，你可以使用 parents( ) 来搜索 DOM 树，如下所示：<tt>$(this).parents('div:eq(0)').attr('id')</tt>。

为了让我的答案简单，我不再匹配 <tt>"comment"</tt> 类，但如果它有助于缩小您正在搜索的 div，您当然可以这样做。

【讨论】：

【解决方案3】：

您对传递给绑定事件处理程序的参数没有太多控制权。

也许可以为您的 doSomething() 定义尝试类似的方法：

function doSomething() { 
  var commentId = $(this).parent().attr('id');
  alert(commentId); 
}

【讨论】：

检查 HTML，实际上是祖父母有 id 属性，而不是父母。
确实，带有触发器的对象被插入到“工具”div中，我错过了。谢谢。

【解决方案4】：

循环遍历 cmets 并为每个 cmets 添加工具可能会更容易。这样你就可以赋予它们各自的功能。我有一个函数返回一个函数，以便以后调用它时，它有正确的评论 ID 可用。

其他解决方案（向上导航以查找父项的 ID）可能会更节省内存。

<script type='text/javascript'>

$(function() {
  $('.comment').each(function(comment) {
    $('.tools', comment).append(
      $('<span>[Do Something]</span>')
          .click(commentTool(comment.id));
    );
  });
});

function commentTool(commentId) {
  return function() {
    alert('Do cool stuff to ' + commentId);
  }
}

</script>

【讨论】：

【解决方案5】：

花点心思让你了解一些你可以做的事情：

var tool = $('<span>[Tool]</span>');

var action = function (id) {
    return function () {
        alert('id');
    }
}

$('div.comment').each(function () {
    var id = $(this).attr('id');

    var child = tool.clone();
    child.click(action(id));

    $('.tools', this).append(child);
});

【讨论】：

【解决方案6】：

函数 bind() 将元素作为参数（在您的情况下为跨度），因此要从中获取所需的 id，您应该执行一些 DOM 遍历，例如：

function doSomething(eventObject) { 
    var elComment = eventObject.parentNode.parentNode; //or something like that, 
                                                       //didn't test it
    var commentId= elComment.getAttribute('commentId')
    alert(commentId); 
}

【讨论】：