Question

我正在使用xslt和javascript来显示数据表。我的一个表格数据是我用作按钮的图像，此按钮位于for-each标签中，因此它出现在来自xml的每个数据实例中。我点击使用jquery隐藏此按钮显示更多按钮链接哪个工作正常，唯一的问题是它为页面上的每个按钮执行此操作时，我只想将其应用于图像被点击。考虑到我正在处理xsl文件，我如何解决这个问题，所以每个按钮都不会由于每个标签都有唯一的ID？

对于一些更多的背景信息，我使用了class属性并在jquery中选择了它，但我愿意完全实现一个不同的解决方案。

非常感谢任何帮助，

提前致谢

Answer 1

假设您拥有button的处理程序，则应使用

$(this).hide()代替$('.buttonclass').hide()

基本上在处理程序中，使用this这是触发事件的元素。使用它可以访问相应的元素，元素的父级，兄弟姐妹等等。

Answer 2

您应该传递点击的引用。

例如：

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

Answer 3

假设你的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);
}

如何将jquery调用仅应用于单击的图像，而不是整个页面

3 个答案: