0

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

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

我已将其在 CSS 中的默认类设置为“非活动”.configImageTitleInactive {display:none;}

我有第二堂课“活跃”.configImageTitleActive {display:block;}

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

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

  1. 检查是否有任何 DIV 已经configImageTitleActive应用于该类，如果是，则将该类更改回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>

如果有更好的方法可以做到这一点，我愿意接受建议。预先感谢您的帮助。

4

4 回答 4

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}.

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

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

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

于 2013-07-05T10:22:51.963 回答
0

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

CSS：

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

查询：

$(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 */
        }
    });
});
于 2013-07-05T10:17:20.467 回答
0

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

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

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

于 2013-07-05T10:24:36.177 回答
0

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

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

$( document ).ready(function() {    

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

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

});

干杯。

维托。

于 2013-07-05T10:39:53.070 回答