使用jQuery从html元素传递参数

时间:2020-03-06 14:41:05  来源:igfitidea点击:

我是第一次使用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将跨度添加到单击时会调用variouis函数的.tools div中。这些函数需要接收父注释的ID(整个"注释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作为替代,而不是ID,以传递对单击的跨度的引用。那也可能很好,但是我不确定如何实现这一点。

谢谢,
布赖恩

解决方案

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

也许为doSomething()定义尝试以下操作:

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

使用事件对象作为第一个参数调用事件回调,我们不能以这种方式传递其他信息。这个事件对象具有一个" 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);
}

遍历注释并将工具内容添加到每个注释中可能会更容易。这样,我们就可以为他们提供各自的功能。我有该函数返回一个函数,以便以后调用它时,它具有可用的正确注释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>

花点时间让我们对可以做的一些事情有所了解:

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);
});

函数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); 
}