如何将jquery调用仅应用于单击的图像，而不是整个页面
我正在使用xslt和javascript来显示数据表。我的一段表数据是一个用作按钮的图像，该按钮位于一个for-each标记中，因此它出现在来自xml的每个数据实例中。我使用jquery来隐藏这个按钮，当点击时显示更多的按钮链接，这很好用，唯一的问题是当我只想将它应用于被点击的图像时，它对页面上的每个按钮都这样做。考虑到我正在处理一个xsl文件，并且由于for each标记，每个按钮都没有唯一的id，我该如何解决这个问题呢？
对于更多的背景信息，我使用了class属性并在jquery中选择了它，但我愿意完全实现一个不同的解决方案。
任何帮助都是非常感谢的，
提前感谢
回答 3
Stack Overflow用户
发布于 2012-05-18 04:18:00
假设您有button的处理程序，您应该使用
用$(this).hide()代替$('.buttonclass').hide()
基本上在处理程序内部，使用this，它是触发事件的元素。使用它，您可以访问相应的元素、元素的父元素、兄弟元素等。
Stack Overflow用户
发布于 2012-05-18 04:17:40
您应该传递单击的引用。
例如：
<img onclick="hideImage(this)" />
然后在函数中：
function hideImage(img){
//img is your image
}或者更好的是，为了避免每个图像的事件，您可以将事件委托给父节点，可以是表：
<table onclick="hideImage(event)">
然后在函数中：
function hideImage(ev){
var elm = ev.target || ev.srcElement;
if(elm.tagName !== 'IMG'){
elm = elm.getElementsByTagName('IMG')[0];
}
//elm is your image
}Stack Overflow用户
发布于 2012-05-18 04:26:17
假设您的HTML/XML是这样的
<ul class="someClass">
<li><img src="/some/path" /></li>
<li><img src="/some/path" /></li>
</ul>使用jQuery 1.7+，您可以执行以下操作
$('ul.someClass').on( 'click', 'img', function( event ) {
var imgElement = this;
$(imgElement).hide();
});在上面的JavaScript代码中，ul.someClass指的是所有图像元素的公共父元素，而img指的是应该触发处理程序的元素。在处理程序本身中，变量this被设置为触发事件的元素，在本例中，它引用一个img元素。此代码使用事件委托，这是非常强大和有用的。
如果你使用jQuery 1.4+ (当然是1.7之前的版本)，你可以这样做：
$('ul.someClass').delegate( 'img', 'click', function( event ) {
var imgElement = this;
$(imgElement).hide();
});如果你的版本是1.4之前的版本，那么你应该对它进行更新，或者你可以这样做：
$('ul.someClass').find('img').bind('click', function( event ) {
var imgElement = this;
$(imgElement).hide();
});此代码段不会使用事件委托。
如果你根本不使用jQuery，你可以这样做(这里是一个有效的演示http://jsfiddle.net/pomeh/u6etD/)：
function hideElement( element ) {
// code to hide "element" variable
}
function hideImageHandler( event ) {
var target = event.target || event.srcElement;
// make sure the click happened on an <img /> element
if ( target && target.nodeType === 1 && target.tagName.toLowerCase() === 'img' ) {
hideElement( target );
}
}
var ul = document.getElementsByTagName('ul')[0];
if ( ul.addEventListener ) {
ul.addEventListener( 'click', hideImageHandler, false );
}
else if ( ul.attachEvent ) {
ul.attachEvent( 'onclick', hideImageHandler);
}https://stackoverflow.com/questions/10642869
复制相似问题
腾讯云开发者
