减少带有变量的switch语句？

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

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

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

Answer 2

首先注意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>