javascript - 单击提交时显示和隐藏具有相同类但不同 ID 的多个 DIV

Question

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

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

我已经使用 .configImageTitleInactive {display:none;} 将它们在 CSS 中的默认类设置为“不活动”

我有一个第二类“事件” .configImageTitleActive {display:block;}

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

单击提交按钮后，我需要代码:

1. 检查是否有任何 DIV 已经有 configImageTitleActive应用于类(class)，如果是，将该类(class)改回 configImageTitleInactive .

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

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>

如果有更好的方法，我愿意接受建议。 预先感谢您的帮助。

Answer 1

嗯，我看到你在使用 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");
});

CSS 对如何应用属性有优先级。本质上——CSS 中的定义越详细——它的优先级就越高。例如 div {display: none} 的优先级低于 div.someclass {display: block}。

所以本质上，我定义了一个类 active，并为它定义了一个 CSS 规则 .block.active，它比 .block 更具体code>，这就是为什么当它被应用时，来自 .block.active 的规则获得更高的优先级。

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

另一个建议:不要创建特定于上下文的类，例如 configImageTitleInactive。最好制作一个通用类 inactive 或 active 然后只写更具体的规则，比如 .configImageTitleBlock .active - 这使得它更容易理解和编码更清洁。