#jquery #class #mouseover #closest
#jquery #класс #наведение #ближайший
Вопрос:
Хорошо, у меня есть этот фрагмент html, он появляется несколько раз на странице, он всегда структурно одинаков, но ссылки и текст ссылки будут отличаться каждый раз вместе с текстом списка.
<ul>
<li class="n1">Understand key issues relating to creating animations for interactive media products</li>
<li class="n2">Understand key contextual information relating to creating 2D animations for interactive media products</li>
<li class="n3">Be able to create 2D animations for use as part of an interactive media product</li>
<li class="n4">Be able to liaise with relevant parties</li>
<li class="n5">Be able to store 2D animations for use as part of an interactive media product</li>
</ul>
<hr />
<a href="alcohol_calculator.php" class="swfselector">
amp;raquo; Alcohol unit calculator prototype <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /><img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="bouncing_ball.php" class="swfselector">
amp;raquo; Bouncing ball animation <img class="tab" src="/images/3.png" width="30" height="28" alt="3" />
</a>
<a href="FOCC_mnemonic.php" class="swfselector">
amp;raquo; FOCC mnemonic <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> <img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="information_literacy_quiz.php" class="swfselector">
amp;raquo; Information literacy quiz <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> <img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="traffic_lights.php" class="swfselector">
amp;raquo; Traffic lights <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> <img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
Я использую этот фрагмент Jquery для изменения изображений в каждой ссылке swfselector при наведении на них курсора мыши:
$(document).ready(function() {
$('.swfselector').find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace(".png", "o.png"));
})
});
$('.swfselector').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
$(this).find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace("o.png", ".png"));
})
} else {
$(this).find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace(".png", "o.png"));
})
}
});
Пока все это работает… но теперь у меня есть этот фрагмент Jquery, который пытается также изменить класс соответствующего
$(document).ready(function() {
$('.swfselector').find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace(".png", "o.png"));
})
});
$('.swfselector').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
$(this).find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace("o.png", ".png"));
var srcString = $(this).attr("src").substr(0, $(this).attr("src").length - 4);
nameString = srcString.substr(8, srcString.length - 1);
$(this).closest('ul').find('li').each(function() {
var className = $(this).attr('class');
if (nameString.indexOf(className)) {
$(this).removeClass(className).addClass(className 'o');
}
})
})
} else {
$(this).find('.tab').each(function() {
$(this).attr("src",
$(this).attr("src").replace(".png", "o.png"));
})
}
});
Приведенный выше код не возвращает ошибок, но не делает то, что я хочу ether.
Комментарии:
1. Где что-то пошло не так? Просто предупреждайте данные, пока что-то не пойдет не так..
2.
$(this).closest('ul').find('li').each(function() {Он не знает, что «это» после здесь. Также srcString был неправильным, поскольку я забыл удалить изображения / путь, поэтому я создал новую подстроку с именем nameString .
Ответ №1:
$(this).closest('ul').find('li').each(function() {
$ (this), похоже, ссылается на ‘.swfselector’, используя closest, вы ищете предков. Но UL не является предком ‘.swfselector’
Редактировать:
Вместо $(this).closest(‘ul’) вам, вероятно, следует сделать:
$('ul').find('li').each(function() {....
или, что еще лучше, дайте вашему ‘ul’ идентификатор
$('#myUL').find('li').each(function() {
Комментарии:
1.
$(this).attr("src"относится к тегам img, потому что он находится внутри функции:$(this).find('.tab').each(function() {разве это не относится также к тегу <img>? Также я понял, что предком является что-то, что предшествует ему в DOM, нет?2. вы правы, что $ (this) ссылается на элемент img. но родительским элементом является элемент ‘a’, ближайший будет искать ВВЕРХ. UL является братом родительского элемента и, следовательно, не будет выполняться поиск. следующим по порядку будет родительский элемент ‘a’, который не отображается в вашем html.
3. Хорошо, это имеет некоторый смысл, поэтому, если я помещу каждый из этих блоков внутрь div, а затем выполню поиск в parent для .tab, я должен найти li?
4. я думаю, вам просто нужно вызвать list напрямую. я обновил свой ответ.
5. Спасибо, проблема в том, что на странице много таких блоков, и каждый из них должен быть индивидуальным, поэтому, если swf-селектор наведен на один, это влияет только на список непосредственно над ним.