Уменьшить оператор переключения с переменной?
У меня есть оператор 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 с таким же определенным атрибутом
Спасибо за ответ, поэтому, если я добавлю переменную в селекторы, это означает, что я удалю весь оператор switch и заменю его предложенной вами строкой? И спасибо за предложение по атрибуту, буду менять!
Это правильно. Я добавил пример в ответ ниже, чтобы было понятнее.
Проклятье. Используйте некоторую структуру mvvm
@RegisPortalez, извини, но я не знаю, что это такое. Я пытаюсь создать этот проект с теми небольшими знаниями, которые у меня есть в jquery. Я знаю, что это не идеально, но я стараюсь изо всех сил
Извини, я злюсь по другим причинам. Попробуйте нокаут или угловой. Это действительно облегчит вашу жизнь, избавившись от селекторов
Ответы 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>Большое спасибо! Теперь все очень ясно. И намного проще. Хорошего дня
Нет проблем, рад помочь
Минимальное изменение - использовать конкатенацию строк:
$(".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();
})
Спасибо за предложение, я не буду дважды запрашивать DOM!
@ MaëlleJumel - :-) В этом нет ничего страшного. Удачного кодирования!
Добавьте переменную в селекторы:
$('.idee[auteur = "' + lequel + '"]').show();. Также обратите внимание, чтоauteurне является допустимым атрибутом. Я бы предложил использовать атрибутdata, если вы хотите добавить пользовательские метаданные к элементу;data-auteur = "marx"например