Jquery, есть мысли, как не повторить код здесь?

Question

Я использую это, чтобы меню работало для моей галереи. .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 );
  });

});

jquery html repeat

0

Jeffrey Sevinga 4 Сен 2017 в 17:40

Answer 1

Создайте общий 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.
});

2

threeFatCat 4 Сен 2017 в 14:55

Answer 2

Вы можете использовать атрибуты 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>

2

freedomn-m 4 Сен 2017 в 15:18

Answer 3

$(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, и привяжите событие только к этому одному классу.

По сути, вы хотите передать один обработчик события, если он одинаков для каждого элемента.

0

Melcma 4 Сен 2017 в 14:58

Answer 4

Просто, коротко и эффективно. Вам нужно только указать свое меню.

$(function() {
    var menu = [
      ['vakantie', 'travel'],
      ['mensen', 'people']
    ];
    menu.forEach(function(element) {
        $( "#"+element[0] ).click(function() {
                $(".masonry").hide(400);
                $( "#"+element[1] ).show( "fade", 1250 );
        });
    });
});

0

TetrisTyp 4 Сен 2017 в 15:13

Answer 5

Также возможно немного изменить имена ваших идентификаторов, чтобы начать с определенного префикса (id = 'xx_bloemen', id = 'xx_mensen', id = 'xx_dieren' и т. Д.). Тогда в вашем коде:

$('div[id^="xx_"]').click(function() {
  $(".masonry").hide(400);
});

Он будет использоваться для каждого div с идентификатором, начинающимся с 'xx_'. Возможно, вам понадобятся дополнительные цитаты где-то в этом примере (я сделал это наизусть), но я надеюсь, что вы поняли идею.

0

freedomn-m 4 Сен 2017 в 15:19

Jquery, есть мысли, как не повторить код здесь?

5 ответов

Новые вопросы

jquery