Javascript 如何仅对单击的图像而不是整个页面应用jquery调用

我使用xslt和javascript来显示数据表。我的一个表格数据是一个图像，我用它作为一个按钮，这个按钮是在一个为每个标签，所以它出现 在xml中的每个数据实例中。我使用jquery在单击以显示更多按钮链接时隐藏此按钮 这很好，唯一的问题是，当我只想将其应用于 正在单击的图像。考虑到我正在处理一个xsl文件，所以每个按钮都不会显示，如何解决这个问题 由于每个标签都有一个唯一的id

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

非常感谢您的帮助

---

提前感谢

您应该通过点击的参考

例如：

然后在函数中：

或者更好，为了避免每个图像发生事件，可以将事件委托给父节点，可以是表：

然后在函数中：

---

您应该传递单击的引用

例如：

然后在函数中：

或者更好，为了避免每个图像发生事件，可以将事件委托给父节点，可以是表：

然后在函数中：

---

假设您有

按钮的处理程序，您应该使用

$（this）.hide（）
而不是
$（'.buttonclass'）.hide（）

基本上在处理程序内部，使用触发事件的元素
this
。使用它可以访问相应的元素、元素的父元素、同级元素等
 假设您有
按钮的处理程序，您应该使用

$（this）.hide（）
而不是
$（'.buttonclass'）.hide（）

基本上在处理程序内部，使用触发事件的元素
this
。使用它可以访问相应的元素、元素的父元素、同级元素等
 假设您的HTML/XML是这样的

function hideImage(img){
  //img is your image
}

function hideImage(ev){
  var elm = ev.target || ev.srcElement;
  if(elm.tagName !== 'IMG'){
    elm = elm.getElementsByTagName('IMG')[0];
  }
  //elm is your image
}

在上面的JavaScript代码中，
ul.someClass
指的是所有图像元素的公共父元素，
img
指的是应该触发处理程序的元素。在处理程序本身中，变量
this
被设置为触发事件的元素，在您的例子中，它指的是
img
元素。这段代码使用事件委托，这是非常强大和有用的

如果您使用jQuery 1.4+（当然是在1.7之前），您可以这样做：

<ul class="someClass">
    <li><img src="/some/path" /></li>
    <li><img src="/some/path" /></li>
</ul>

如果您的版本是1.4之前的版本，那么您应该更新它，或者您可以这样做：

$('ul.someClass').on( 'click', 'img', function( event ) {
    var imgElement = this;

    $(imgElement).hide();
});

此代码段不会使用事件委派

如果您根本不使用jQuery，您可以这样做（这里是一个工作演示）
):

函数隐藏元素（元素）{
//隐藏“element”变量的代码
}
函数hideImageHandler（事件）{
var target=event.target | | event.src元素；
//确保单击某个图元
if（target&&target.nodeType==1&&target.tagName.toLowerCase（）==='img'）{
隐藏元素（目标）；
}
}
var ul=document.getElementsByTagName（'ul'）[0]；
如果（ul.addEventListener）{
ul.addEventListener（'click'，hideImageHandler，false）；
}
否则，如果（ul附件）{
ul.attachEvent（'onclick'，hideImageHandler）；
}
假设您的HTML/XML是这样的

function hideImage(img){
  //img is your image
}

function hideImage(ev){
  var elm = ev.target || ev.srcElement;
  if(elm.tagName !== 'IMG'){
    elm = elm.getElementsByTagName('IMG')[0];
  }
  //elm is your image
}

在上面的JavaScript代码中，
ul.someClass
指的是所有图像元素的公共父元素，
img
指的是应该触发处理程序的元素。在处理程序本身中，变量
this
被设置为触发事件的元素，在您的例子中，它指的是
img
元素。这段代码使用事件委托，这是非常强大和有用的

如果您使用jQuery 1.4+（当然是在1.7之前），您可以这样做：

<ul class="someClass">
    <li><img src="/some/path" /></li>
    <li><img src="/some/path" /></li>
</ul>

如果您的版本是1.4之前的版本，那么您应该更新它，或者您可以这样做：

$('ul.someClass').on( 'click', 'img', function( event ) {
    var imgElement = this;

    $(imgElement).hide();
});

此代码段不会使用事件委派

如果您根本不使用jQuery，您可以这样做（这里是一个工作演示）
):

函数隐藏元素（元素）{
//隐藏“element”变量的代码
}
函数hideImageHandler（事件）{
var target=event.target | | event.src元素；
//确保单击某个图元
if（target&&target.nodeType==1&&target.tagName.toLowerCase（）==='img'）{
隐藏元素（目标）；
}
}
var ul=document.getElementsByTagName（'ul'）[0]；
如果（ul.addEventListener）{
ul.addEventListener（'click'，hideImageHandler，false）；
}
否则，如果（ul附件）{
ul.attachEvent（'onclick'，hideImageHandler）；
}
因此每个按钮都不会有唯一的id，因为for-each标记会导致无效的html。您应该分配一个类而不是一个id。请参阅Vega的答案，但如果您发布了如何处理点击，这会有所帮助。在xslt转换中，您不能生成唯一的id，这不是真的。函数
generate-id（）。请问一个问题，如何在XSLT中做到这一点，并通过评论让我知道——我很乐意提供答案。我的答案中是否缺少一些东西？我可以问一下为什么它不适合你吗？所以每个按钮都不会有唯一的id，因为for-each标签会导致无效的html。您应该分配一个类而不是一个id。请参阅Vega的答案，但如果您发布了如何处理点击，这会有所帮助。在xslt转换中，您不能生成唯一的id，这不是真的。函数
generate-id（）。请提问如何在XSLT中实现这一点，并通过评论让我知道--