JQuery 显示/隐藏具有匹配标题和 alt 标签的元素答案

【问题标题】：JQuery show/hide elements with matching title and alt tagJQuery 显示/隐藏具有匹配标题和 alt 标签的元素
【发布时间】：2015-10-26 06:10:59
【问题描述】：

是否可以通过鼠标悬停在仅匹配标签为标题和alt的链接上显示图像？

我的 CMS 只能为 2 个完全分离的元素生成匹配的标题和 alt 标签。大致是这样的：

<a href="#" title="aubergine">hover this to show image</a>

<img width="300" height="300" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img>

我已经能够像这样定位 img：

$('a').mouseover(function() {
$('[alt="aubergine"]').css( "opacity", "100" );
});

但我必须通过[alt="title of this link i just hovered"] 获取图像，而不是特定目标[alt="aubergine"]。

到目前为止，这是工作原型的一个小技巧： https://jsfiddle.net/82xnqu6j/1/

【问题讨论】：

jQuery .attr() 方法就是您要在这里寻找的。此外，您将使用与悬停属性匹配的=== 条件检查器。最后，为了自动化该过程，您可以通过.index() 将链接和图像绑定在一起（假设它不会动态更改）。我将尝试完善一个工作示例，但是您能否提供要在 HTML 中使用的所有图像？
opacity 从 0.0 变为 1.0。这是一个分数，而不是百分比，所以100 不合适。
嗯，哎呀？感谢巴尔玛的提示。 @AlexanderDixon 我想我已经找到了解决方案。谢谢。

标签： javascript jquery show title alt

【解决方案1】：

使用 jQuery 提取当前元素的 title 属性，如下面的示例所示。

这样您就可以将其推广到所有匹配的链接。

实例：

$('a').mouseover(function() {
  $('[alt="' + $(this).attr("title") + '"]').css( "opacity", "1" );
});

$('a').mouseout(function() {
  $('[alt="' + $(this).attr("title") + '"]').css( "opacity", "0" );
});

img {opacity:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="aubergine">hover this to show image</a>

<img width="100" height="100" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img>

JSFiddle 版本：https://jsfiddle.net/82xnqu6j/4/

【讨论】：

很好的解决方案。完美运行。我有一个后续问题：是否可以定位我们刚刚定位的元素的容器？目前位于
标记内，我也想通过 JQuery 进行更改。非常感谢。 :)
尝试将选定的元素放入变量中 - var el = $('[alt="' + $(this).attr("title") + '"]'); 然后 el.css( "opacity", "1" );，然后您可以使用 el 做任何您想做的事情。也考虑使用el.parent()。
那行得通。惊人的。再次感谢，你真棒。如果有人感兴趣，这里是一个更新的 Fiddle：jsfiddle.net/82xnqu6j/8

【解决方案2】：

只需尝试从链接中获取实际标题并将其用作选择器的一部分

    $('a').mouseover(function() { 
        $('[alt="'+this.title+'"]').css( "opacity", "100" );
    });

这适用于任何属性，例如标题、src、href 等。

查看 w3schools 页面：http://www.w3schools.com/cssref/sel_attribute_value.asp

【讨论】：

【解决方案3】：

您可以在 jQuery 中使用 $(this).attr('title') 来选择元素的任何属性，与原生 JavaScript 中的 this.title 相同。

$('a').mouseover(function() {
  $('[alt="' + $(this).attr('title') + '"]').css("opacity", "100");
});

$('a').mouseout(function() {
  $('[alt="' + $(this).attr('title') + '"]').css("opacity", "0");
});

img {
  opacity: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="aubergine">hover this to show image</a>
<a href="#" title="test">hover this to show image</a>
<img width="300" height="300" alt="aubergine" src="http://i.imgur.com/0MmkDiI.jpg"></img>
<img width="300" height="300" alt="test" src="http://i.stack.imgur.com/gVqLo.png"></img>

【讨论】：