У меня вопрос о функции отображения / скрытия - PullRequest
Новая
       308

У меня вопрос о функции отображения / скрытия

0 голосов
/ 07 августа 2020

У меня есть вопрос о функции отображения / скрытия с div, которые имеют несколько классов

Итак, у меня 4 кнопки и 4 класса, и я знаю, как отображать / скрывать div, которые имеют только один класс ... 

<button id="button1"></button>
<button id="button2"></button>
<button id="button3"></button>
<button id="button4"></button>

<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>

Однако, если div имеет несколько классов: 

<div class="class1 class2"></div>

следующий скрипт не работает .. 

<script>
$(document).ready(function(){
$("#button1").click(function(){
$(".class1").show();
$(".class2").hide();
$(".class3").hide();
$(".class4").hide();
});
$("#button1").click(function(){
$(".class1").hide();
$(".class2").show();
$(".class3").hide();
$(".class4").hide();
});
$("#button3").click(function(){
$(".class1").hide();
$(".class2").hide();
$(".class3").show();
$(".class4").hide();
});
$("#button4").click(function(){
$(".class1").hide();
$(".class2").hide();
$(".class3").hide();
$(".class4").show();
});
</script>

Кроме того, могу я как-нибудь его написать что мне не нужно писать каждый div, который я хочу скрыть? 

.hasClass show()
else hide()

Потому что в будущем у меня может быть 20 классов или больше ...

Извините, я новичок: )

Ответы [ 3 ]

0 голосов
/ 07 августа 2020

он думает, что все мысли работают нормально, но у вас последняя синтаксическая ошибка и тот, кто все останавливает 

$(document).ready(function(){
    $("#button1").click(function(){
    $(".class1").show();
    $(".class2").hide();
    $(".class3").hide();
    $(".class4").hide();
    });
    $("#button2").click(function(){
    $(".class1").hide();
    $(".class2").show();
    $(".class3").hide();
    $(".class4").hide();
    });
    $("#button3").click(function(){
    $(".class1").hide();
    $(".class2").hide();
    $(".class3").show();
    $(".class4").hide();
    });
    $("#button4").click(function(){
    $(".class1").hide();
    $(".class2").hide();
    $(".class3").hide();
    $(".class4").show();
    })
    
});
0 голосов
/ 07 августа 2020

Я получил ответ!

Сначала спрячьте все div, а затем покажите то, что вы хотите!

Вот так, div может иметь несколько классов! 

<button id="button1"></button>
<button id="button2"></button>
<button id="button3"></button>
<button id="button4"></button>

<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
<div class="class1 class2"></div>
<div class="class3 class4"></div>
<div class="class1 class2 class3 class4"></div>

<script>
$(document).ready(function(){
$("#button1").click(function(){
$("div").hide();
$(".class1").show();
});
$("#button1").click(function(){
$("div").hide();
$(".class2").show();
});
$("#button1").click(function(){
$("div").hide();
$(".class3").show();
});
$("#button1").click(function(){
$("div").hide();
$(".class4").show();
});
</script>

Спасибо всем!

0 голосов
/ 07 августа 2020

Это потому, что вы сначала show, а затем hide. Чтобы он работал, вы должны скрыть все селекторы имен классов, а затем сделать .show для соответствующего селектора классов.

Более чистый подход - создать метод hideAll, а затем .show для соответствующий селектор класса.

...