javascript - Passing in parameter from html element with jQuery - Stack Overflow

admin管理员组

文章数量:1339799

I'm working with jQuery for the first time and need some help. I have html that looks like the following:

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

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

I'm trying to use jQuery to add spans to the .tools divs that call variouis functions when clicked. The functions needs to receive the id (either the entire 'ment-8' or just the '8' part) of the parent ment so I can then show a form or other information about the ment.

What I have thus far is:

<script type='text/javascript'>

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

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

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

</script>

I'm stuck on how to populate the mentId parameter for doSomething. Perhaps instead of the id, I should be passing in a reference to the span that was clicked. That would probably be fine as well, but I'm unsure of how to acplish that.

Thanks, Brian

I'm working with jQuery for the first time and need some help. I have html that looks like the following:

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

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

I'm trying to use jQuery to add spans to the .tools divs that call variouis functions when clicked. The functions needs to receive the id (either the entire 'ment-8' or just the '8' part) of the parent ment so I can then show a form or other information about the ment.

What I have thus far is:

<script type='text/javascript'>

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

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

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

</script>

I'm stuck on how to populate the mentId parameter for doSomething. Perhaps instead of the id, I should be passing in a reference to the span that was clicked. That would probably be fine as well, but I'm unsure of how to acplish that.

Thanks, Brian

• javascript
• jquery

Share Improve this question Follow asked Sep 24, 2008 at 19:34 Brian VallelungaBrian Vallelunga 10.2k1616 gold badges6464 silver badges9191 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 6

Event callbacks are called with an event object as the first argument, you can't pass something else in that way. This event object has a target property that references the element it was called for, and the this variable is a reference to the element the event handler was attached to. So you could do the following:

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

...or:

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

To get from the span up to the surrounding divs, you can use <tt>parent()</tt> (if you know the exact relationship), like this: <tt>$(this).parent().attr('id')</tt>; or if the structure might be more deeply nested, you can use parents() to search up the DOM tree, like this: <tt>$(this).parents('div:eq(0)').attr('id')</tt>.

To keep my answer simple, I left off matching the class <tt>"ment"</tt> but of course you could do that if it helps narrow down the div you are searching for.

You don't have a lot of control over the arguments passed to a bound event handler.

Perhaps try something like this for your definition of doSomething():

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

It might be easier to loop through the ments, and add the tool thing to each. That way you can give them each their own function. I've got the function returning a function so that when it's called later, it has the correct ment ID available to it.

The other solutions (that navigate back up to find the ID of the parent) will likely be more memory efficient.

<script type='text/javascript'>

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

function mentTool(mentId) {
  return function() {
    alert('Do cool stuff to ' + mentId);
  }
}

</script>

Getting a little fancy to give you an idea of some of the things you can do:

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

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

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

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

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

The function bind() takes, takes the element as a parameter (in your case the span), so to get the id you want from it you should do some DOM traversal like:

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

本文标签： javascriptPassing in parameter from html element with jQueryStack Overflow