Question

我想用HTML创建一个选择题测试，并且我使用“ div”作为答案选项。单击一个选项（div）时，应更改其背景色。这是我的代码：

        <div id="option" onclick="select()">Option 1</div>
        <div id="option" onclick="select()">Option 2</div>
        <div id="option" onclick="select()">Option 3</div>
      </div>

      <script>
        var div = document.getElementById("option");

        function select() {
          div.setAttribute("id", "optionSelected");
        }
      </script>

CSS代码：

#option {
  background-color: #ffffff;
}
#optionSelected {
  background-color: #008080;
}

当我单击任何一个div时，只有第一个div的背景发生了变化，因为它们都具有相同的ID。

Answer 1

您可以尝试使用事件目标：

，而不是尝试根据ID分配类（如所指出的那样，该类不具有重复项是不正确的），

function select(e) {
  // Unset selected class from other options
  const selected = document.querySelectorAll('.option-list .option-selected');
  selected.forEach(function(el) {
    el.classList.remove('option-selected');
  });
  e.target.classList.add('option-selected');
}

.option {
  background-color: #FFFFFF;
  padding: 5px;
}
.option-selected {
  background-color: #008080;
  color: #FFFFFF;
}

<div class="option-list">
  <div class="option option-selected" onclick="select(event)">Option 1</div>
  <div class="option" onclick="select(event)">Option 2</div>
  <div class="option" onclick="select(event)">Option 3</div>
</div>

Answer 2

这是我发布答案的时间，如果不是最好的话，抱歉。

这是我现在想到的最简单的方法。

您将不得不更改

<div id="option" onclick="select()">Option 1</div>
<div id="option" onclick="select()">Option 2</div>
<div id="option" onclick="select()">Option 3</div>

对此

<div id="option1" class="option" onclick="select('option1')">Option 1</div>
<div id="option2" class="option" onclick="select('option2')">Option 1</div>
<div id="option3" class="option" onclick="select('option3')">Option 1</div>

因此，您可以区分不同的div。此外，每个元素都会调用该函数，以指定应更改的元素。

然后向函数添加参数，以便您可以指定要更改的元素。

另一行代码将当前类“ option”替换为“ optionSelected”。

<script>
    function select(id) {

        var div = document.getElementById(id);

        div.classList.replace("option", "optionSelected");

    }
</script>

最后，将CSS规则更改为类。

.option {
  background-color: #ffffff;
}

.optionSelected {
  background-color: #008080;
}

Answer 3

您不能为所有div分配相同的ID。 ID必须是唯一的。请改用课程。

Answer 4

1）您永远不要为多个元素分配相同的ID，它们应该始终是不同的ID。

2）您可以改用一个类，然后在JavaScript函数中调用它。

var div = document.getElementsByClassName("option");
function select() {
    div.setAttribute("class", "optionSelected")
}

希望这会有所帮助！

Answer 5

那么，这就是您所要的，但是您不想使用下拉框吗？

function select(opt) {
           var div = document.getElementById(opt);
          div.setAttribute("class", "optionSelected");
        }

#option {
  background-color: #ffffff;
}
.optionSelected {
  background-color: #008080;
}

<div id="option1" onclick="select('option1')">Option 1</div>
        <div id="option2" onclick="select('option2')">Option 2</div>
        <div id="option3" onclick="select('option3')">Option 3</div>

Answer 6

如果要使用Id，则应使用类来设置项目。

        <div id="option" onclick="select(this)">Option 1</div>
        <div id="option" onclick="select(this)">Option 2</div>
        <div id="option" onclick="select(this)">Option 3</div>
      </div>

      <script>
        var div = document.getElementById("option");

        function select(opt) {

          opt.setAttribute("id", "optionSelected");
        }
      </script>

Answer 7

您可以通过向函数中添加this作为参数来简化操作（每次单击时都会添加颜色切换）：

<div class="option" onclick="select(this)">Option 1</div>
<div class="option" onclick="select(this)">Option 2</div>
<div class="option" onclick="select(this)">Option 3</div>

<script>
  function select(el) {
    el.classList.toggle("optionSelected");
  }
</script>
<style>
  .option {
    background-color: #ffffff;
  }
  .optionSelected {
    background-color: #008080;
}
</style>

Answer 8

您也可以不使用JavaScript，而仅使用CSS。

.option {
    background-color: #ffffff;
    cursor: pointer; /* add if you want */
}

/*
    When the div with the unique id gets focus
    due to a click the background color is applied
*/
#option1:focus, #option2:focus, #option3:focus {
    background-color: #008080;
}

<!--
  Add a class for the background color that applies to the
  three divs, and add unique id's to each div
-->
<div>
  <div class="option" id="option1" tabindex="1">Option 1</div>
  <div class="option" id="option2" tabindex="2">Option 2</div>
  <div class="option" id="option3" tabindex="3">Option 3</div>
</div>

如何更改div onclick的背景颜色？

8 个答案: