Question

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

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

我已将CSS中的默认类设置为＆＃34;非活动＆＃34;与.configImageTitleInactive {display:none;}

我有第二堂课＆＃34;活跃＆＃34;与.configImageTitleActive {display:block;}

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

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

检查是否有任何DIV已将configImageTitleActive应用于该课程，如果是，请将该课程更改回configImageTitleInactive。
将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更具体，这就是为什么当它被应用时，来自{的规则{1}}获得更高的优先级。

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

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

Answer 2

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

CSS：

<style>
.configImageTitle { display: none; }
.configImageTitle.active { display: block; }
</style>

JQuery的：

$(document).ready(function() {
    $('img.submit').click(function() {
        var $configImageTitle = temp1 + temp2 + temp3;
        if ($configImageTitle == "cp-xos"){
            $("div.configImageTitle").hasClass("active") ? $("div.configImageTitle").removeClass("active") : "";
            var configImageTitleTemp = $("#cp-xos");
                $configImageTitleTemp.addClass("active");
        } else {
            /* and so on */
        }
    });
});

Answer 3

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

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

并从javascript访问div并将其visibilty设置为可见。谢谢 AB

Answer 4

我猜几乎是@Max写的，只是用一个运行的例子：

http://jsbin.com/agawov/11/edit

$( document ).ready(function() {    

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

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

});

干杯。

的Vitor。

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

4 个答案: