Передача параметра из html-элемента с помощью jQuery

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 для добавления диапазонов в div .tools, которые при нажатии вызывают различные функции. Функции должны получить идентификатор (либо весь «комментарий-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>

Я застрял в том, как заполнить параметр commentId для doSomething. Возможно, вместо идентификатора, я должен передать ссылку на промежуток, по которому щелкнули. Это, вероятно, было бы хорошо, но я не уверен, как этого добиться.

Спасибо, 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

Чтобы добраться от промежутка до окружающих элементов, вы можете использовать <tt>parent()</tt> (если вы знаете точное соотношение), например: <tt>$(this).parent().attr('id')</tt>; или если структура может быть более глубоко вложенной, вы можете использовать родителей ( ) для поиска по дереву DOM, например: <tt>$(this).parents('div:eq(0)').attr('id')</tt>.

Чтобы не усложнять свой ответ, я перестал сопоставлять класс <tt>"comment"</tt>, но, конечно, вы могли бы сделать это, если это поможет сузить искомый div.

Answer 3

Функция bind () принимает, принимает элемент в качестве параметра (в вашем случае это span), поэтому для получения нужного вам идентификатора вы должны выполнить некоторый обход DOM, например:

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

Answer 4

Немного фантазии, чтобы дать вам представление о некоторых вещах, которые вы можете сделать:

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 5

Возможно, будет проще перебрать комментарии и добавить инструмент для каждого. Таким образом, вы можете дать им свои функции. У меня есть функция, возвращающая функцию, так что когда она вызывается позже, ей доступен правильный идентификатор комментария.

Другие решения (которые перемещаются назад, чтобы найти идентификатор родителя), вероятно, будут более эффективными с точки зрения памяти.

<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 6

У вас недостаточно контроля над аргументами, передаваемыми обработчику связанных событий.

Возможно, попробуйте что-то подобное для определения doSomething () :

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