Question

我有一个缩略图网格，网格旁边有一个完整尺寸的图片。

 <div id="gallery-thumbs"> 
    <ul class="thumb"> 
    <li><a href="images/medium.jpg"><img src="images/thumb.jpg" /></a></li> 
    </ul>
 </div>
 <div id="main-view"> 
 <img src="images/medium.jpg" /> 
 </div>

我想设置一个jquery函数来检测ul.thumb li a的“href”属性是否与＃main-view img的src属性匹配。

如果确实匹配，则将缩略图图像的不透明度更改为100％。

任何帮助都将不胜感激。

谢谢。

Answer 1

试试这个：

var mainViewURL = $("#main-view img").attr("src");
var thumbs = $("#gallery-thumbs .thumb li a");
$.each(thumbs, function(){
    if(mainViewURL == $(this).attr("href")){
        $("img", this).animate({ opacity: 1.0 }); 
    }
});

Answer 2

function change_opacity() {
 if ($('ul#thumb li a').attr('href') == $('div#main-view img').attr('src')) {
    $('ul#thumb li img').css('opacity','0.4');
  }
}

希望这会对你有所帮助。您甚至可以将$（'ul＃thumb li'）分配给某个变量，例如var thumb = $（'ul＃thumb li'）。

Answer 3

这是一个jQuery插件形式的解决方案：

$.fn.fullSizeFullOpacity = function () {
  return this.each(function () {
    var $a = $(this).find('a'),
        $img = $a.find('img');
    if ($a.attr('href') == $img.attr('src')) {
      $img.css('opacity', 1.0);
    }
  });
};

$('.thumb li').fullSizeFullOpacity ();

这是一个jsPerf测试，我在其中使用不同的版本来查看效果。

jquery函数检测缩略图的href是否与全尺寸图像的src匹配？

3 个答案: