Jquery，有什么想法如何不重复这里的代码？

Question

我用它来使菜单适用于我的画廊。 .masonry # 在 display:none 上，这样我可以使用菜单中的 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

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

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

它将用于每个 ID 以 'xx_' 开头的 div。您可能需要在此示例中的某处添加一些额外的引号（我已经记下了），但我希望您能理解。

Answer 2

为所有按钮创建一个通用的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.
});

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 一样创建一个 class 并将一个事件绑定到这个 class。

基本上，如果每个元素都相同，您希望传递一个事件处理程序。

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

Answer 5

您可以将 data- 属性用于 link 按钮和内容。单击一个按钮，读取它的数据-（例如数据-link），然后在数据-link 中找到元素并显示它。

这样做的好处是，当您 add/remove buttons/panels 并且不依赖于解析 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>

Jquery，有什么想法如何不重复这里的代码？

Jquery, any thoughts how to not repeat the code here?

html

jquery

repeat