Question

我有一个switch语句，根据按钮的属性，显示具有此属性的div，并隐藏那些不具有此属性的div。除了我有多行代码用于多个属性。但最后代码总是相同的，只有属性名称会改变。有没有办法将属性的名称设置为变量，只有一行代码（然后最有可能删除切换）？

这是我到目前为止的代码（它只有几行会有更多）：

Jquery：

$(".button").on("click", function(){
  var lequel = $(this).attr("data-auteur");

  switch(lequel) {
    case "descartes" :
      $(".idee[data-auteur='descartes']").show();
      $(".idee[data-auteur!='descartes']").hide();
      break;

    case "hobbes" :
      $(".idee[data-auteur='hobbes']").show();
      $(".idee[data-auteur!='hobbes']").hide();
      break;

    case "marx" :
      $(".idee[data-auteur='marx']").show();
      $(".idee[data-auteur!='marx']").hide();
      break;

    case "platon" :
      $(".idee[data-auteur='platon']").show();
      $(".idee[data-auteur!='platon']").hide();
      break;
  }
})

如果您想要HTML，请告诉我，但我认为这个想法很清楚。有一些具有特定属性的按钮，在具有相同特定属性的div下面

Answer 1

首先请注意auteur不是有效属性。如果您要将自定义元数据添加到元素，我建议使用data属性;例如data-auteur="marx"。

关于你的问题，你可以通过将变量附加到选择器来避免切换和缩短逻辑：

$(".button").on("click", function() {
  var lequel = $(this).data("auteur");
  $('.idee[data-auteur="' + lequel + '"]').show();
  $('.idee[data-auteur!="' + lequel + '"]').hide();
})

.idee {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" data-auteur="descartes">Descartes</button>
<button class="button" data-auteur="hobbes">Hobbes</button>
<button class="button" data-auteur="marx">Marx</button>
<button class="button" data-auteur="platon">Platon</button>

<div class="idee" data-auteur="descartes">
  Descartes content...
</div>
<div class="idee" data-auteur="hobbes">
  Hobbes content...
</div>
<div class="idee" data-auteur="marx">
  Marx content...
</div>
<div class="idee" data-auteur="platon">
  Platon content...
</div>

Answer 2

最小的变化是使用字符串连接：

$(".button").on("click", function(){
  var auteur = $(this).attr("auteur");

  $(".idee[auteur='" + auteur + "']").show();
  $(".idee[auteur!='" + auteur + "']").hide();
})

您也可以避免两次查询DOM，尽管它很好：

$(".button").on("click", function(){
  var auteur = $(this).attr("auteur");

  $(".idee")
    .filter("[auteur='" + auteur + "']").show().end()
    .filter("[auteur!='" + auteur + "']").hide();
})

用变量减少switch语句？

2 个答案: