Сначала, пожалуйста, смотрите этот пост на Doctype
Я пытался получить ответ на этот вопрос, но безуспешно. Сценарий, предоставленный первым постером, прекрасно работает, но мне нужно, чтобы это происходило автоматически для всех групп, соответствующих Rel.
Любая помощь будет принята с благодарностью.
EDIT:
Для тех из вас, кто не может перейти по ссылке выше, вот сценарий:
<!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 распознал группу связанных изображений (с одинаковым значением), скрыл все изображения, кроме первого, и применил фоновое изображение к контейнеру первой фотографии (еще не завершено, но, скорее всего, это будет div или li).
Этот скрипт уже делает это.
Однако мне нужен скрипт, чтобы сделать это автоматически, со всеми соответствующими группами rel, без необходимости вводить атрибут rel.