JQuery show/hide 个具有匹配标题和 alt 标签的元素

Question

是否可以通过鼠标悬停在 link 上显示图像，其唯一匹配的标签是 title 和 alt？

我的 CMS 只能为 2 个完全独立的元素生成匹配的 title 和 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"]

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

Answer 1

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

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

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

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

Answer 2

使用 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/

Answer 3

您可以只使用$(this).attr('title')来选择jQuery中元素的任何属性，与原生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>

JQuery show/hide 个具有匹配标题和 alt 标签的元素

JQuery show/hide elements with matching title and alt tag

javascript

jquery

title

show

alt