Javascript 单击“提交”时显示和隐藏具有相同类但ID不同的多个div

我有许多应用了相同类的div，但是ID是唯一的。我希望在页面加载时隐藏所有div，然后单击submit按钮时，我希望其中一个div（由ID确定）变为可见

我认为最好的方法是使用CSS类

我已经用

将他们在CSS中的默认类设置为“inactive”.configImageTitleInactive{display:none；}

我有第二个类“active”，带有

.configImageTitleActive{display:block；}

我已经定义并成功地填充了全局变量temp1、temp2和temp3，因为这些变量在页面的其他地方使用

单击“提交”按钮时，我需要代码：

检查是否有任何div已将

configImageTitleActivity

应用于该类，如果是，请将该类更改回

configImageTitleActivity

将3个临时变量整理在一起（不是数字，因为这些变量包含字母）

将组合值与DIV的id进行比较，并打开该DIV的可见性

javascript代码如下所示：

    $(document).ready(function() {
$('img.submit').click(function() {
var $configImageTitle = temp1 + temp2 + temp3;
if ($configImageTitle == "cp-xos"){
        $("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
        var configImageTitleTemp = document.getElementById('cp-xos');
        $configImageTitleTemp.addClass("configImageTitleActive");
}
else if ($configImageTitle == "cp-uos"){
        $("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
        var configImageTitleTemp = document.getElementById('cp-uos');
        $configImageTitleTemp.addClass("configImageTitleActive");
}
else if ($configImageTitle == "cp-uod"){
        $("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
        var configImageTitleTemp = document.getElementById('cp-uod');
        $configImageTitleTemp.addClass("configImageTitleActive");
}
else {
        $("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
        var configImageTitleTemp = document.getElementById('cp-xod');
        $configImageTitleTemp.addClass("configImageTitleActive");
};
});
});

以及HTML：

<div class="configImageTitleBlock">
<div class="configImageTitleInactive" id="cp-xos">I am 1 CP-XOS</div>
<div class="configImageTitleInactive" id="cp-uos">I am 2 CP-UOS</div>
<div class="configImageTitleInactive" id="cp-uod">I am 3 CP-UOD</div>
<div class="configImageTitleInactive" id="cp-xod">I am 4 CP-XOD</div>

</div>

我是一个CP-XOS
我是2个CP-UOS
我是3号CP-UOD
我是4 CP-XOD

如果有更好的方法，我愿意接受建议。

---

提前感谢您的帮助。

我认为最好不要删除主类，而是简单地添加类“active”，然后检查元素是否有类“active”

CSS:

---

嗯，我看到您正在使用jQuery，但没有使用它的全部功能。以下是您如何完成任务的方法：

var configImageTitle = temp1 + temp2 + temp3;
$('div.configImageTitleActive').removeClass("configImageTitleActive").addClass("configImageTitleInactive");
$('#'+configImageTitle).addClass("configImageTitleActive");

添加：

关于做得更好：

<div class="configImageTitleBlock">
    <div class="block" id="cp-xos">I am 1 CP-XOS</div>
    <div class="block" id="cp-uos">I am 2 CP-UOS</div>
    <div class="block" id="cp-uod">I am 3 CP-UOD</div>
    <div class="block" id="cp-xod">I am 4 CP-XOD</div>
</div>

------- CSS --------
.configImageTitleBlock div.block {
    display: none;
}

.configImageTitleBlock div.block.active {
    display: block;
}

------- CSS --------
...eventandstuff(function() {
    var activeElem = temp1 + temp2 + temp3;
    $('.configImageTitleBlock div.block.active').removeClass("active");
    $('#'+activeElem).addClass("active");
});

我是一个CP-XOS
我是2个CP-UOS
我是3号CP-UOD
我是4 CP-XOD
-------CSS--------
.configImageTitleBlock分区块{
显示：无；
}
.configImageTitleBlock div.block.active{
显示：块；
}
-------CSS--------
…eventandstuff（函数（）{
var activeElem=temp1+temp2+temp3；
$（'.configImageTitleBlock div.block.active'）.removeClass（“active”）；
$（'#'+activeElem）.addClass（“active”）；
});

CSS具有如何应用属性的优先级。本质上，CSS中的定义越详细，它的优先级就越高。例如，

div{display:none}

的优先级低于

div.someclass{display:block}

所以本质上，我定义了一个类

active

，并为它定义了一个CSS规则

.block.active

，它比

.block

更具体，这就是为什么在应用它时，

.block.active

中的规则会获得更高的优先级

这种方法更好，因为不需要为active和inactive定义两个单独的类。您只能使用

活动的

一个

---

另一个建议是：不要创建特定于上下文的类，比如

configImageTitleInactive

。最好使泛型类

处于非活动状态

或

处于活动状态

，然后编写更具体的规则，如

。configImageTitleBlock.active

-这使它更容易理解，代码更干净。

您可以使用更好的逻辑，如尝试设置所有div的可见性：隐藏，如下所示

<div class="configImageTitleInactive" id="cp-xos" style="visibility:hidden">I am 1 CP-XOS</div>

我是一个CP-XOS

并从javascript访问div，并将其Visibility设置为visible。 谢谢

---

AB

我猜@Max写的差不多，只是举一个运行的例子：

干杯

---

Vitor。

请您创建一个包含所有这些代码的小提琴，这样我们就可以进行一些实验和游戏了。此外，您的HTML不包含任何按钮，因此我不知道您希望如何实现任何onclick功能。是的，如果您能告诉我如何创建一个，请：）我在HTML中有按钮代码，只是没有发布：

转到并将您的HTML添加到HTML部分，将一些css添加到css部分，将jquery添加到javascript部分。您的html似乎也不正确，因为没有按钮。另外，变量是如何填充的？谢谢，我将创建一个fiddle。就它们可能应用的样式而言，这不是一个好的解决方案，因为可见性隐藏仍然在页面上保留空间，而显示：无；直到它被设置为阻止。这正是我想要的，谢谢Max，谢谢大家的输入。

<div class="configImageTitleBlock">
    <div class="block" id="cp-xos">I am 1 CP-XOS</div>
    <div class="block" id="cp-uos">I am 2 CP-UOS</div>
    <div class="block" id="cp-uod">I am 3 CP-UOD</div>
    <div class="block" id="cp-xod">I am 4 CP-XOD</div>
</div>

------- CSS --------
.configImageTitleBlock div.block {
    display: none;
}

.configImageTitleBlock div.block.active {
    display: block;
}

------- CSS --------
...eventandstuff(function() {
    var activeElem = temp1 + temp2 + temp3;
    $('.configImageTitleBlock div.block.active').removeClass("active");
    $('#'+activeElem).addClass("active");
});

<div class="configImageTitleInactive" id="cp-xos" style="visibility:hidden">I am 1 CP-XOS</div>

$( document ).ready(function() {    

 $(document)
  .find('.configImageTitleBlock > div.configImageTitleActive')
  .removeClass("configImageTitleActive");

 $(document)
  .find('.configImageTitleBlock > div#cp-xos')        
  .removeClass('configImageTitleInactive')      
  .addClass('configImageTitleActive');

});