Question

我用它来使菜单适合我的画廊。 .masonry＃显示：无，这样我就可以使用菜单中的ID在点击时显示相应的图库。很多代码都在重复。希望有人有一个很好的解决方案，可以消除重复。如果可能的话。

$(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 );
  });

});

Answer 1

为所有按钮创建一个通用class，例如＆＃39; my-button＆＃39;

$('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.
});

Answer 2

您可以使用data-属性链接按钮和内容。单击一个按钮，读取其数据 - （例如数据链接），然后在数据链接中找到该元素并显示该元素。

这样做的好处是，当您添加/删除按钮/面板时，您的代码不需要更改，并且不依赖于解析ID。

$(".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>

Answer 3

还可以稍微更改您的ID的名称，以特定前缀开头（id ='xx_bloemen'，id ='xx_mensen'，id ='xx_dieren'，依此类推）。然后在你的代码中：

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

它将用于id为'xx_'的每个div。在这个例子中你可能需要一些额外的引号（我已经用心做了），但我希望你明白这一点。

Answer 4

$(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，并将事件绑定到这一个类。

基本上你想要传递一个事件处理程序，如果它对每个元素都相同。

Answer 5

简单，简短，有效。您只需指定菜单。

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

Jquery，有什么想法在这里不重复代码？

5 个答案: