我对显示/隐藏功能有疑问答案

【问题标题】：I have a question about show/hide function我对显示/隐藏功能有疑问
【发布时间】：2020-08-07 13:17:49
【问题描述】：

我对具有多个类的 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 节课或更多...

对不起，我是初学者:)

【问题讨论】：

最小的工作剪断会很好。
定义“不起作用”？哪个特定操作产生了意想不到的结果？那是什么结果？预期的结果是什么？为什么？你的元素有多少个类没有区别。（可能需要您更改逻辑，但不会更改 show 和 hide 函数的功能。）
不起作用 - 意味着如果我有一个包含多个类 class="class1 class2 class3" 的 div，那么它只需要最后一个类，这意味着只有 button3 工作并使 class3 可见..按钮 1 和 2 不显示元素...
我开发了一种解决方法，为具有多个类的项目提供单独的类 - class="class1-class2" 并具有额外的值，例如 $(".class1-class2").show(); - 这是非常丑陋的临时解决方案

标签： javascript show-hide

【解决方案1】：

这是因为你先是show，然后是hide。为了让它工作，你应该隐藏所有的类名选择器，然后为相关的类选择器做一个.show。

更简洁的方法是创建一个hideAll 方法，然后为相关的类选择器创建.show。

【讨论】：

哇！这实际上似乎有效！谢谢！ $("div").hide(); $(".class1").show();
不客气@Hannes。如果它对您有用，您能否为答案投票？谢谢。

【解决方案2】：

它认为一切正常，但你最后有语法错误以及阻止一切的人

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

【讨论】：

我希望你想要什么
我希望你想要什么
是的，该脚本仅在我有单个类的 div 时才有效，我已经使用了一段时间。我的意思是现在我有多个类的 div class="class1 class2"我想要的是该元素在按钮 1 和按钮 2 中可见-但是脚本仅选择最后一个类，使按钮 2 按预期工作而按钮 1 什么也不做-我所做的-我开发了一种解决方法，具有单独的项目类具有多个类 - class="class1-class2" 并具有额外的值，例如 $(".class1-class2").show();
这只是代码中的组织问题，只需专注并放松地思考您的代码以及您想要做什么，然后您就可以通过开始组织您的 div 和按钮来做到这一点

【解决方案3】：

我得到了答案！

先隐藏所有的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>

谢谢大家！

【讨论】：