Я использую это, чтобы меню работало для моей галереи. .Masonry # на дисплее: нет, так что я могу использовать идентификатор в меню, чтобы показать соответствующую галерею при нажатии. Много кода повторяется. Надеюсь, у кого-то есть хорошее решение, которое устраняет повторение. Если возможно.
$(function() {
$( "#vakantie" ).click(function() {
$(".masonry").hide(400)
$( "#travel" ).show( "fade", 1250 );
});
$( "#mensen" ).click(function() {
$(".masonry").hide(400)
$( "#people" ).show( "fade", 1250 );
});
$( "#dieren" ).click(function() {
$(".masonry").hide(400)
$( "#animal" ).show( "fade", 1250 );
});
$( "#bloemen" ).click(function() {
$(".masonry").hide(400)
$( "#corso" ).show( "fade", 1250 );
});
$( "#event" ).click(function() {
$(".masonry").hide(400)
$( "#eventGallery" ).show( "fade", 1250 );
});
});
5 ответов
Создайте общий class
для всех кнопок, например 'my-button'
$('body').on('click','.my-button',function(){
// .. then check the id
var id = $(this).attr('id');
$(".masonry").hide(400);
//..apply condition
if(id == 'vakantie'){
$('#travel').show( "fade", 1250 );
}else if(id == 'mensen'){
$('#people').show( "fade", 1250 );
}
//..etc so on.
});
Вы можете использовать атрибуты data-
для связи кнопок и содержимого. Нажмите кнопку, прочитайте ее данные (например, ссылку на данные), затем найдите элемент в ссылке на данные и покажите это.
Преимущество этого заключается в том, что ваш код не нужно менять при добавлении / удалении кнопок / панелей и не зависит от анализа идентификаторов.
$(".link").click(function() {
var panel = $(this).data("link");
//console.log(panel)
$(".panel").hide(function() {
$("div[data-link='" + panel + "']").fadeIn(1250);
});
});
.panel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='link' data-link='travel'>vakentie</button>
<button class='link' data-link='people'>mensen</button>
<div class='panel' data-link='travel'>Travel</div>
<div class='panel' data-link='people'>People</div>
$(function() {
var $vakantie = $('#vakantie'),
$mensen = $('#mensen'),
$dieren = $('#dieren'),
$bloemen = $('#bloemen'),
$masonry = $('.masonry'),
$travel = $('#travel');
function handleClick() {
$masonry.hide(400)
$trave.show('fade', 1250 );
}
Array.prototype.forEach.call([$akantie, $mensen, $dieren, $bloemen],
function (node) {
$(node).on('click', handleClick);
}
);
});
Или создайте один класс, такой как js-fade-in-out
, и привяжите событие только к этому одному классу.
По сути, вы хотите передать один обработчик события, если он одинаков для каждого элемента.
Просто, коротко и эффективно. Вам нужно только указать свое меню.
$(function() {
var menu = [
['vakantie', 'travel'],
['mensen', 'people']
];
menu.forEach(function(element) {
$( "#"+element[0] ).click(function() {
$(".masonry").hide(400);
$( "#"+element[1] ).show( "fade", 1250 );
});
});
});
Также возможно немного изменить имена ваших идентификаторов, чтобы начать с определенного префикса (id = 'xx_bloemen', id = 'xx_mensen', id = 'xx_dieren' и т. Д.). Тогда в вашем коде:
$('div[id^="xx_"]').click(function() {
$(".masonry").hide(400);
});
Он будет использоваться для каждого div с идентификатором, начинающимся с 'xx_'. Возможно, вам понадобятся дополнительные цитаты где-то в этом примере (я сделал это наизусть), но я надеюсь, что вы поняли идею.
Похожие вопросы
Новые вопросы
jquery
jQuery - это библиотека JavaScript, рассмотрите возможность добавления тега JavaScript. jQuery - это популярная кросс-браузерная библиотека JavaScript, которая облегчает прохождение Document Object Model (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться в рассматриваемом коде, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.