Question

我希望将特定的div颜色改为蓝色或灰色 - 在同一个类下有许多不同的div，我希望能够单独点击每个div以将颜色更改为蓝色或灰色

＆＃13;

          <div class="sidebar2" onclick="change(this)">
          <p>11</p>
          </div>
          <div class="sidebar2" onclick="change(this)">
          <p>10</p>
          </div>
          <div class="sidebar2" onclick="change(this)">
          <p>9</p>
          </div>
          <div class="sidebar2" onclick="change(this)">
          <p>8</p>
          </div>


    <!-- JavaScript -->

    <script>
    function change(elm) {
    elm.style.backgroundColor = '#1E90FF'
    }
    </script>

＆＃13;

Answer 1

添加一个具有背景颜色的类，并使用.toogle()添加或删除该类，将classe名称作为change()的参数传递：

function change(elm, className) {
  elm.classList.toggle(className)
}

.blue{
  background: blue;
}

.gray{
  background: gray;
}

<div class="sidebar2" onclick="change(this, 'blue')">
  <p>11</p>
</div>
<div class="sidebar2" onclick="change(this, 'gray')">
  <p>10</p>
</div>
<div class="sidebar2" onclick="change(this, 'blue')">
  <p>9</p>
</div>
<div class="sidebar2" onclick="change(this, 'gray')">
  <p>8</p>
</div>

编辑：基于你的评论： div将以灰色开始，我希望它在我点击它时会变成蓝色然后如果我点击相同的div而它的蓝色则变回灰色

function change(elm) {      
    elm.classList.toggle('blue') 
}

.sidebar2{
  background: #aaa;
}

.blue{
  background: #1E90FF;
}

<div class="sidebar2" onclick="change(this)">
  <p>11</p>
</div>
<div class="sidebar2" onclick="change(this)">
  <p>10</p>
</div>
<div class="sidebar2" onclick="change(this)">
  <p>9</p>
</div>
<div class="sidebar2" onclick="change(this)">
  <p>8</p>
</div>

Answer 2

你很亲密。从默认情况下应用于所有div元素的CSS类开始，然后初始为灰色。然后，单击时，切换另一个将覆盖灰色的类，并使其变为蓝色。

而且，不是设置内联样式（使用element.style.backgroundColor），而是使用 element.classList API，该API易于使用，并允许您在之前设置CSS类只需要添加，删除或切换的时间。

但是，您也不应该使用HTML事件处理属性，例如onchange。这是一个20多年前的技术，不幸的是，它是如此多产，虽然 there are many reasons to abandon this technique 仍然可以使用它。相反，请在单独的script中完成所有JavaScript。

最后，除非您在每个p元素中使用div元素有某些特定原因，否则您可以删除div或p元素它们都代表了代码的新部分。

请注意以下HTML的清晰程度：

// Get all the p elements that need to be able to be colored into an array
var pars = Array.prototype.slice.call(document.querySelectorAll("p.sidebar2"));

// Loop over the array elements and assign a click event handler each p
pars.forEach(function(p){
  p.addEventListener("click", function() { 
    p.classList.toggle("blue"); // Toggle the use of the .blue class
  });
});

.sidebar2 { background: #e0e0e0; } /* Applied by default */
p.blue  { background: lightblue; } /* Toggled on/off when div is clicked */

<!-- The HTML can be much more simplified -->
<p class="sidebar2">11</p>
<p class="sidebar2">10</p>
<p class="sidebar2">9</p>
<p class="sidebar2">8</p>

Answer 3

给定两个css类，一个代表in和一个out，您可以在change方法中切换一个和一个。

＆＃13;

function change(elm) {
  elm.classList.toggle("in");
  elm.classList.toggle("out");
}

＆＃13;

.in {
   background-color:#1E90FF; // blue
}

.out {
   background-color:#CCCCCC; // grey
}

＆＃13;

<div class="sidebar2 in" onclick="change(this)">
<p>11</p>
</div>
<div class="sidebar2 in" onclick="change(this)">
<p>10</p>
</div>
<div class="sidebar2 in" onclick="change(this)">
<p>9</p>
</div>
<div class="sidebar2 in" onclick="change(this)">
<p>8</p>
</div>

＆＃13;

注意：我已将它们全部默认为in以启动，如果需要，您可以按其他方式默认它们。

如果Else声明使用ELM

3 个答案: