使用jQuery從html元素傳遞參數

Question

我第一次使用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添加跨度，這些div在單擊時調用variouis函數。 函數需要接收父注釋的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，我應該傳遞對被點擊的跨度的引用。 這也許會很好，但我不確定如何做到這一點。

謝謝，Brian

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

Answer 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，你可以這樣做。

Answer 3

您對傳遞給綁定事件處理程序的參數沒有太多控制權。

也許嘗試這樣的東西來定義doSomething（） ：

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

Answer 4

循環瀏覽注釋可能更容易，並將工具添加到每個注釋中。 這樣你就可以給他們各自的功能。 我有函數返回一個函數，以便稍后調用它時，它具有正確的注釋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>

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

Answer 6

函數bind（）接受，將元素作為參數（在你的情況下是span），所以要從中獲取你想要的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); 
}