jQuery - сделать скрыть все/показать это изображение div более общим
Вопрос
у меня есть следующий код jquery.
по сути, у меня будет несколько перекрывающихся div и список ссылок справа от всех этих перекрывающихся div.при наведении курсора на ссылку назначенный ей элемент div будет исчезать.
У меня есть следующий код, и он работает (он использует образцы изображений Windows по умолчанию), но если кто-то может придумать способ оптимизировать его или сделать универсальным, я был бы признателен.
<html>
<script type="text/javascript">
$(document).ready(function() {
$("#trigger1").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divsunset").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divsunset").fadeIn(500);
});
$("#trigger2").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divwinter").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divwinter").fadeIn(500);
});
$("#trigger3").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divbh").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divbh").fadeIn(500);
});
$("#trigger4").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divwl").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divwl").fadeIn(500);
});
});
</script>
<style>
#divsunset
{
position: absolute;
top: 5px;
left: 5px;
}
#divwinter
{
position: absolute;
top: 5px;
left: 5px;
}
#divbh
{
position: absolute;
top: 5px;
left: 5px;
}
#divwl
{
position: absolute;
top: 5px;
left: 5px;
}
#links
{
position: absolute;
top: 800px;
left: 700px;
}
.inactive
{
}
</style>
Спасибо, Мэтт, TM и kRON, ваши ответы очень помогли.
Не думаю, что я полностью объяснил себя, но ТМ дала ответ, который я искал.
Я хотел следовать DRY, и предоставленный TM код на этот раз помог мне лучше всего, поскольку мне не требовалось изменять разметку, а только код jQuery.
Еще раз большое спасибо.Удивительно, как быстро я получил ответ.Продолжайте в том же духе.
Решение
Первое, что вы можете сделать, чтобы сделать его чище, — это заменить все подобные вызовы чем-то более общим.
(примечание:предположим, что все это внутри document.ready()
)
$('#trigger1').data('target', '#divsunset');
$('#trigger2').data('target', '#divwinter');
$('#trigger3').data('target', '#divbh');
$('#trigger4').data('target', '#divwl');
$('#trigger1,#trigger2,#trigger3,#trigger4').mouseover(function() {
var selector = $(this).data('target');
$(".contentdiv").addClass("inactive");
$(selector).removeClass("inactive");
$(".inactive").fadeOut(500);
$(selector).fadeIn(500);
});
Использование селекторов, разделенных запятыми, — отличный способ выполнить DRY с помощью jQuery.
я использую $(element).data()
для установки и получения некоторых данных об элементе, в данном случае селектор используется для обновления соответствующего элемента.
Кроме того, просто для более четкого визуального вида вы можете использовать следующее вместо $(document).ready()
, если вы предпочитаете это.Это то же самое, просто другой синтаксис.
$(function() {
//DOM ready
};
Другие советы
Я ответил на аналогичный вопрос несколько месяцев назад Замена элементов jQuery если это поможет.
Мэтт
Уточнение: если у меня есть {id:'1'}, вам следует поменять идентификатор div, который вы хотите показать, и создать общее имя класса для других DIV, чтобы скрыть их.
Помните, что к элементу можно применить несколько классов:
<Div class="name1 name2"></div>
что может помочь, если к исходным элементам div прикреплены правила стиля.
Это хорошо, но вам понадобится более общий подход к назначенным вами идентификаторам.
Самое быстрое решение, которое приходит на ум, — это обернуть перекрывающиеся элементы div, которые исчезают под родительским элементом div «#wrapped».Возьмите все ссылки и назначьте им классы CSS «ИМЯ триггера», где «ИМЯ» — «Закат», «Зима» и т. д.Тогда вы можете сделать что-то вроде:
$(document).ready(function() {
$(".trigger").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#wrapper ." + $(this).attr('class')[1]).removeClass("inactive");
$(".inactive").fadeOut(500);
$("#wrapper ." + $(this).attr('class')[1]).fadeIn(500);
});
Это не самое лучшее решение, но надеюсь, что оно даст вам представление.