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