Reduce switch statement with variable?

Question

I have a switch statement which, depending on a button's attribute, shows the divs that do have this attribute, and hide the ones that don't. Except I have multiple lines with this code for multiple attributes. But in the end the code is always the same, only the attribute name changes. Is there a way to set the attribute's name as a variable too and only have one line of code (then remove switch most likely) ?

Here's the code I have so far (it's only a few lines there will be a lot more) :

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

Let me know if you want the html but I think the idea is pretty clear. There are the buttons with a certain attribute and under the divs with the same certain attribute

Answer 1

Firstly note that auteur is not a valid attribute. I'd suggest using a data attribute if you wan to add custom meta data to an element; data-auteur="marx" for example.

With regard to your question, you can avoid the switch and shorten the logic by appending the variable in to the selectors:

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

The minimal change is to use string concatenation:

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

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

You can also avoid querying the DOM twice, though it's fine as is:

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

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