0

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

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

任何帮助是极大的赞赏，

提前致谢

4

3 回答 3

2

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

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

基本上在处理程序内部，使用this哪个是触发事件的元素。使用它你可以访问相应的元素、元素的父元素、兄弟元素等等。

于 2012-05-17T20:18:00.213 回答
1

假设您的 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);
}
于 2012-05-17T20:26:16.617 回答
1

您应该传递点击的引用。

例如：

<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
}
于 2012-05-17T20:17:39.800 回答