我做了一个图像下拉区作为另一个工具的一部分，当你放下一个图像时，它会在文本中显示它下面的文件名，如果它太长了，它会截断一行。缩短的文件名显示为1个字符串，完整的文件名也以完整的形式写入另一个字符串，但默认情况下隐藏，直到您显示它。
我有一个“reveal”按钮，它应该隐藏截断的文件名，并显示完整的文件名和类的addClass和removeClass。hidden --我知道我刚刚在代码中犯了一些愚蠢的错误，单击.truncated span执行removeClass，但它没有addClass......但当我单击上面的图像时，这是实际触发addClass位的时候，这不是我想要的。我希望在单击带有类.truncated的span时，这两种情况同时发生
https://jsfiddle.net/zos31ecu/9/（当您将图像文件拖到拖放区时，请确保图像文件名的长度至少为15个字符）。
我知道这不是实现这一点的最佳方法，但我仍在学习，当同一个类有多个示例时，这是我唯一能正常工作的方法（你可以一次拖动多个图像，所以会有很多图像和标题，显然我只希望单击事件对一个特定的标题执行该操作）。有人能提出更好的方法吗？
$(document).click('.truncated',function(e){
const target = $(e.originalEvent.target);
target.next('span.truncated').addClass('hidden')
target.next('span.full').removeClass('hidden')
});字符串
谢谢你
1条答案
按热度按时间jaxagkaj1#
您在标题中的问题诊断是反向的：当您单击错误的元素时，不会触发事件，而是事件处理程序没有正确找到要隐藏的元素。
在代码中，您尝试查找
next('span.truncated')，但next在目标元素之后开始搜索。在本例中，span.truncated元素实际上是目标（您在其上设置了事件处理程序），因此您可以使用target.addClass('hidden')：编辑（重要）：由于
.click(optionalParam, handler)和.on('click', optionalParam, handler)之间的jQuery语法差异，原始代码无法正常工作。在第一种情况下，当提供optionalParam时，它表示将传递给事件的数据，而对于第二种情况，如果提供了optionalParam，则它将是限制选择的字符串。在这种情况下，我们需要使用第二种语法：字符串
以下是修正后的小提琴：
https://jsfiddle.net/p4wbkg3h/
先前非工作代码：
型
（以前的非工作提琴）：
https://jsfiddle.net/38f0Lc95/的