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

