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

【问题标题】：jquery function to detect if href of thumbnail matches src of full-size image?jquery函数检测缩略图的href是否与全尺寸图像的src匹配？
【发布时间】：2011-08-17 22:24:25
【问题描述】：

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

 <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%。

任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： jquery

【解决方案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 }); 
    }
});

【讨论】：

【解决方案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')。

【讨论】：

【解决方案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 测试，我在其中玩了不同的版本以查看性能。

【讨论】：