Уменьшить оператор switch с помощью переменной? - PullRequest
Новая
       8

Уменьшить оператор switch с помощью переменной?

0 голосов
/ 08 июня 2018

У меня есть оператор switch, который, в зависимости от атрибута кнопки, показывает 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 с таким же определенным атрибутом

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Минимальным изменением является использование конкатенации строк: 

$(".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();
})
0 голосов
/ 08 июня 2018

Во-первых, обратите внимание, что 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>
...