Question

我尝试使用JavaScript在选中后更改元素的背景颜色，并确保一次只有一个元素具有特定的背景颜色。一旦用户选择了不同的元素，我希望选择的前一个元素被不同的背景颜色替换。目前，我只能通过选择EACH元素来切换单个元素。我需要能够选择一个元素并应用新的背景颜色，然后让JavaScript将以前活动元素的背景颜色更改为不同的颜色（少一点击）。

我想要做的是非常类似于现代导航栏或列表项目，其中一次只有一个元素是“活动的”并且背景颜色与同一div，行等中的其他元素不同。

关于我的工作的注意事项我正在使用bootstrap，并且不希望在这个特定的项目中使用jQuery。

CSS：

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            h4 {
                border: 1px solid black;
                border-radius: 8px;
                padding: 10px 2px 10px 2px;
                margin: 20px 20px 0px 20px;
                background-color: #F0F0F0;
                border-color: #F8F8F8;
                color: #505050;
                cursor: pointer;
            }

            .active {
                background-color: #99E6FF;
            }
        </style>
    </head>
</html>

HTML：

<div id="pTwoRowOne">
    <div class="row">
        <div class="col-md-4 row row-centered">
            <h4 id="techBio" class="test">Biology</h4>
        </div>
        <div class="col-md-4 row row-centered">
            <h4 id="techCart" class="test">Cartography</h4>
        </div>
        <div class="col-md-4 row row-centered">
            <h4 id="techChem" class="test">Chemistry</h4>
        </div>
    </div>
</div>

JavaScript的：

document.getElementById("techBio").onclick=function() {
    document.getElementById("techBio").classList.toggle('active');
}

document.getElementById("techCart").onclick=function() {
    document.getElementById("techCart").classList.toggle('active');
}

document.getElementById("techChem").onclick=function() {
    document.getElementById("techChem").classList.toggle('active');
}

这里可以看到一个例子：http://jsbin.com/fugogarove/1/edit?html,css,js,output

如果需要澄清，请告诉我。

Answer 1

是的，非常简单。

<强>假设

您并未尝试支持IE8，因为您正在使用classList
您可以将元素作为变量存放，而不是反复查询DOM。

示例

JSBin

<强>代码

我重新编写了你的JavaScript，使它更清洁，并且干了一点：

var techs = [].slice.call(document.querySelectorAll('#pTwoRowOne h4')); function set_active(event) { techs.forEach(function(tech){ if (event.target == tech) { return; } tech.classList.remove('active'); }); event.target.classList.toggle('active'); } techs.forEach(function(item) { item.addEventListener('click', set_active); });

一些解释

[].slice.call(document.querySelectorAll('#pTwoRowOne h4')); - 我们正在使用此功能将输出从NodeList更改为Array。这允许我们稍后使用forEach。 querySelectorAll返回NodeList，其中包含与CSS选择器匹配的所有元素。您可以使用更好的CSS选择器替换它，具体取决于您的环境。

addEventListener比通过onclick +=迭代添加绑定事件侦听器更好。它也是ECMA5及其后的推荐方式（据我所知）。

通过将元素查询设置为变量，您可以将引用保留在内存中，而不是每次更改元素时轮询DOM。这会使你的JavaScript速度稍快，而且它再次只是它生成的更好，更清晰的代码版本。

<强>更新

我重新设计JS以使其更有意义。

Answer 2

假设您只有一个活动元素，可以使用document.querySelector()找到它 - 如果您可以使用倍数，则可以使用document.querySelectorAll()并迭代它们。

简单案例：

function activate(event) {
  var active=document.querySelector('.active');

  // activate the clicked element (even if it was already active)
  event.target.classList.add('active');

  // deactivate the previously-active element (even if it was the clicked one => toggle)
  if (active) active.classList.remove('active');
}

document.getElementById("techBio").addEventListener("click",activate);
document.getElementById("techCart").addEventListener("click",activate);
document.getElementById("techChem").addEventListener("click",activate);

h4 {
   border: 1px solid black;
   border-radius: 8px;
   padding: 10px 2px 10px 2px;
   margin: 20px 20px 0px 20px;
   background-color: #F0F0F0;
   border-color: #F8F8F8;
   color: #505050;
   cursor: pointer;
}
	
.active {
   background-color: #99E6FF;
}

<div id="pTwoRowOne">
  <div class="row">
    <div class="col-md-4 row row-centered">
      <h4 id="techBio" class="test">Biology</h4>
    </div>
    <div class="col-md-4 row row-centered">
      <h4 id="techCart" class="test">Cartography</h4>
    </div>
    <div class="col-md-4 row row-centered">
      <h4 id="techChem" class="test">Chemistry</h4>
    </div>
  </div>
</div>

Answer 3

您可以这样做：

[].slice.call(document.querySelectorAll(".test")).forEach(function(element) {
  element.addEventListener('click', function(event) {
    if (activeElement = document.querySelector(".test.active")) {
      activeElement.classList.remove("active");
    };
    event.target.classList.add('active');
  });
});

基本上，首先我们从活动元素中删除active类，然后将它添加到目标。

JSBin

Answer 4

另一种类似且更简单的方法： jsBin ;）

<xs:element name="Applications" maxOccurs="1">
  <xs:complexType>
    <xs:sequence>
      <xs:element name="Application" maxOccurs="unbounded" minOccurs="1">
        <xs:complexType>
          <xs:all>
            <xs:element type="xs:string" name="ProjectDirName"/>
            <xs:element type="xs:string" name="Project" minOccurs="0"/>
            <xs:element type="xs:string" name="Version" minOccurs="0"/>
            <xs:element type="xs:string" name="PackageArg" minOccurs="0"/>
            <xs:element type="xs:string" name="OutputDirName"/>
          </xs:all>
          <xs:attribute type="xs:string" name="Name" use="optional"/>
          <xs:attribute name="Type" use="required">
            <xs:simpleType>
              <xs:restriction base="xs:string">
                <xs:enumeration value="Web"/>
                <xs:enumeration value="Batch"/>
                <xs:enumeration value="Service"/>
              </xs:restriction>
            </xs:simpleType>
          </xs:attribute>
        </xs:complexType>
      </xs:element>
    </xs:sequence>
  </xs:complexType>
</xs:element>

如何使用JavaScript来改变多个元素的CSS

4 个答案: