Question

我试图进行小型调查，我希望按钮在我点击时更改颜色，然后在选择同一问题中的其他按钮时返回清除。它当前将我点击的按钮更改为红色，其余部分保持清晰，但点击任何其他按钮，无论是在该问题还是下一个按钮，都会将所有按钮更改为清除。我是一名初学者，所以我会非常感激。

＆＃13;

function changeColor(id) {
  var tabs = document.getElementsByClassName('btn')
  for (var i = 0; i < tabs.length; ++i) {
    var item = tabs[i];
    item.style.backgroundColor = (item.id == id) ? "red" : "";
  }
}

＆＃13;

.btn {
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="background1 ">
  <div class="transbox ">
    <h3 align="center ">Q1. Disagreeing with a friend on preferences.</h3>
    <table border="1 ">
    </table>
    <table id="table1 ">
    </table>
    <table align="center ">
      <tbody>
        <tr>
          <td><input type="button " value="Not at all likely " button id="tab1 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Slightly likely " button id="tab2 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Somewhat likely " button id="tab3 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Moderately Unlikely " button id="tab4 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Likely " button id="tab5 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Very likely " button id="tab6 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Extremely Likely " button id="tab7 " class="btn " onClick="changeColor(this.id) "></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


<div class="background2 ">
  <div class="transbox ">
    <h3 align="center ">Q2. Betting a day's income on horse racing.</h3>
    <table border="1 ">
    </table>
    <table align="center ">
      <tbody>
        <tr>
          <td><input type="button " value="Not at all likely " button id="tab8 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Slightly likely " button id="tab9 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Somewhat likely " button id="tab10 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Moderately Unlikely " button id="tab11 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Likely " button id="tab12 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Very likely " button id="tab13 " class="btn " onClick="changeColor(this.id) "></td>
          <td><input type="button " value="Extremely Likely " button id="tab14 " class="btn " onClick="changeColor(this.id) "></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

＆＃13;

Answer 1

不要使用btn类遍历所有元素。找到包含当前按钮的表，然后循环浏览同一个表中的按钮。

此外，不要将this.id传递给函数，只需传递this。

function changeColor(button) {
  var table = button.parentElement.parentElement.parentElement;
  var tabs = table.querySelectorAll(".btn");
  for (var i = 0; i < tabs.length; ++i) {
    var item = tabs[i];
    item.style.backgroundColor = (item == button) ? "red" : "";
  }
}

.btn {
  width: 100%;
  height: 100%;
}

<div class="background1 ">
  <div class="transbox ">
    <h3 align="center ">Q1. Disagreeing with a friend on preferences.</h3>
    <table border="1 ">
    </table>
    <table id="table1 ">
    </table>
    <table align="center ">
      <tbody>
        <tr>
          <td><input type="button " value="Not at all likely " button id="tab1 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Slightly likely " button id="tab2 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Somewhat likely " button id="tab3 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Moderately Unlikely " button id="tab4 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Likely " button id="tab5 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Very likely " button id="tab6 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Extremely Likely " button id="tab7 " class="btn " onClick="changeColor(this) "></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


<div class="background2 ">
  <div class="transbox ">
    <h3 align="center ">Q2. Betting a day's income on horse racing.</h3>
    <table border="1 ">
    </table>
    <table align="center ">
      <tbody>
        <tr>
          <td><input type="button " value="Not at all likely " button id="tab8 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Slightly likely " button id="tab9 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Somewhat likely " button id="tab10 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Moderately Unlikely " button id="tab11 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Likely " button id="tab12 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Very likely " button id="tab13 " class="btn " onClick="changeColor(this) "></td>
          <td><input type="button " value="Extremely Likely " button id="tab14 " class="btn " onClick="changeColor(this) "></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

问题是所有按钮的类名都是“btn”。

这是一个解决方案，根据它们所在的表格为输入添加类名，并以编程方式绑定onclick。查看Fiddle

这是我使用的JavaScript：

'en-US'

通过相同的功能运行不同的元素集

2 个答案: