Jquery，有什么想法如何不在这里重复代码吗？答案

【问题标题】：Jquery, any thoughts how to not repeat the code here?Jquery，有什么想法如何不在这里重复代码吗？
【发布时间】：2017-09-04 14:40:49
【问题描述】：

我使用它来使菜单适用于我的画廊。 .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 );
  });

});

【问题讨论】：

你点击的元素和你想要显示的元素之间有什么关系吗？具体的 HTML 结构，...？也向我们展示您的 HTML。
如果您共享 html，那么您可能会得到一些解决方案，否则根本不可能

标签： jquery html repeat

【解决方案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】：

您可以使用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>

【讨论】：

你好，使用上面的其他方法，因为我还没有完全理解你的方法。在 .data 和 data-links 上查看 Jquery API。
没关系，学习是迭代的。您从独特的一对一方法开始（单击 A 做 A，单击 B 做 B）然后接受的答案是下一步（单击 A 或 B，根据单击的内容做 A 或 B）@TetrisTyp 的答案将是下一次迭代，您将配对单击/执行移动到一个数组中，以便数据和代码是分开的，这使得它更易于维护，然后下一步将是您将数据与代码完全分离的这一步骤。毫无疑问，在这之后的另一个迭代中，您可能会使用 angular 或其他东西来删除一些代码（完全数据驱动）。

【解决方案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 这样的类并将一个事件绑定到这个类。

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：