Question

我一直试图找到答案，但没有成功。第一张海报所提供的脚本效果很好，但是我需要这个脚本自动发生，适用于所有匹配的Rel组。

非常感谢任何协助。

编辑：对于那些你无法按照上面的链接，这里是脚本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>match rel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $("input[type='button']").click(function(){
    $(".photo img").show().css('background','transparent'); //restore visibility
    matchImg($("#relval").val());
  });
});

function matchImg(relVal){
    var sel = ".photo img[rel='" + relVal + "']";
    if ($(sel).length > 0) { //check matching rel
        $(sel + ":gt(0)").hide(); //hide all except first
        $(sel + ":first").css('background','red'); //set background to first
    }
}
</script>
<style type="text/css">
.photo img {
    padding: 5px;
    float: left;
}
</style>
</head>
<body>
<div class="photo">
<img rel="dt" src="http://doctype.com/images/logo-small.png" alt="1" />
<img rel="dt" src="http://doctype.com/images/logo-small.png" alt="2" />
<img rel="dt" src="http://doctype.com/images/logo-small.png" alt="3" />
<img rel="so" src="http://sstatic.net/so/img/logo.png" alt="4" />
<img rel="so" src="http://sstatic.net/so/img/logo.png" alt="5" />
</div>
<p style="clear: both;">
Enter 'dt' or 'so' <input type="text" value="dt" id="relval" />
<input type="button" value="match" />
</p>
</body>
</html>

基本上，我正在对照片进行网格布局并对其进行修改。有些照片是相关的，有些则没有。相关的将具有匹配的Rel属性。我想jquery识别一组相关的图像（具有相同的rel），隐藏除第一个之外的所有图像并将背景图像应用于第一张照片的容器（尚未最终确定但是，它可能是一个div或者li）。

此脚本已执行此操作。

但是，我需要脚本自动执行此操作，使用所有匹配的rel组，而无需输入rel属性。

Answer 1

脚本必须要做的第一件事就是找出所有“rel”值。

$(function() {
 var allRels = {};
 $('img[rel]').each(function() {
   allRels[$(this).attr('rel')] = true;
 });

然后你可以通过并隐藏除第一个之外的所有内容（或者你想要做的任何事情）：

$.each(allRels, function(rel) {
  $('img[rel=' + rel + ']').each(function(i) {
    if (i == 0) {
      // $(this) is the first image with this particular "rel" value
    }
    else {
      // $(this) is another image in the group, but not the first
    }
  });
});

}）;

我没有测试过，但也许你明白了。

使用Jquery匹配Rel属性

1 个答案: