Question

https://jsfiddle.net/50kyg2yt/

<script>
        function change() {
                var elem = document.getElementById("out");
                if (elem.value=="OUT") elem.value = "IN";
                else elem.value = "OUT";
            }
        function color() {
                var background = document.getElementById("out").style.backgroundColor;
                if (background == "rgb(26, 255, 0)") {
                    document.getElementById("out").style.background = "rgb(255,0,0)";
                } 
                else {
                    document.getElementById("out").style.background = "rgb(26,255,0)";
                }

            }
    </script>

</head>

<body>
    <table id="board" style="width:100%">
        <tr id="head">
            <th>Name</th>
            <th>Out</th>
        </tr>
        <tr id="row1">
            <td id="name">
                Row 1
            </td>
            <td align="center">
                <input onclick="change(); color()" type="button" value="OUT" id="out" style="background-color: red"></input>
            </td>
        </tr>
        <tr id="row2">
                <td id="name">
                    Row 2
                </td>
                <td align="center">
                    <input onclick="change(); color()" type="button" value="OUT" id="out" style="background-color: red"></input>
                </td>
        </tr>

我有一个最终会有多行的表。单击第1行中的按钮时，它会将颜色从红色变为绿色，从外部变为中。

然后，如果单击第2行按钮，则会更改第1行按钮。但我希望它能改变第2行按钮。

我对此非常陌生，并试图自学，所以有一种更简单的方法可以做到这一点，而无需复制代码并更改ID和所有内容吗？

感谢您的帮助！

我为在小提琴的html窗口中我的代码所憎恶而道歉。

中号

Answer 1

不要总是在document.getElementById和change函数中引用相同的元素（color），而是将元素的引用传递给这些函数。

所以基本上是这样的：

function change(elem) {
    if (elem.value=="OUT") 
        elem.value = "IN";
    else 
        elem.value = "OUT";
}

function color(elem) {
    var background = elem.style.backgroundColor;
    if (background == "rgb(26, 255, 0)") {
        elem.style.background = "rgb(255,0,0)";
    } 
    else {
        elem.style.background = "rgb(26,255,0)";
    }
}

https://jsfiddle.net/n2b1k53j/

Answer 2

首先，id应该在页面上是唯一的。在这种情况下使用类。

使用JS绑定事件并避免使用内联事件处理程序。
如果要引用调用事件处理程序的元素，请使用this。
使用类来更改样式而不是内联样式。

＆＃13;

// select all the elements with a speicific class
// and iterate over using forEach
document.querySelectorAll('.out').forEach(function(elem) {
  // bind a click event for each element in iteration
  elem.addEventListener('click', function(event) {
    // toggle the value and background based on the active class
    if (this.classList.contains('active')) {
      this.classList.remove('active');
      this.value = "OUT";
    } else {
      this.classList.add('active');
      this.value = "IN";
    }
  });
});

＆＃13;

.out {
  background-color: rgb(255,0,0);
}

.active {
  background: rgb(26,255,0);
}

＆＃13;

<table id="board" style="width:100%">
  <tr id="head">
    <th>Name</th>
    <th>Out</th>
  </tr>
  <tr id="row1">
    <td id="name">
      Row 1
    </td>
    <td align="center">
      <input type="button" value="OUT" class="out" />
    </td>
  </tr>
  <tr id="row2">
    <td id="name">
      Row 2
    </td>
    <td align="center">
      <input type="button" value="OUT" id="out" class="out" />
    </td>
  </tr>
  </table

＆＃13;

Answer 3

使用事件你可以做到这一点。

工作示例：

function change(e) {
  var elem = e.target;
  elem.value = (elem.value == "OUT")?"IN":"OUT";
}

function color(e) {
  var background = e.target.style.backgroundColor;
  e.target.style.background = (background == "rgb(26, 255, 0)")?"rgb(255,0,0)":"rgb(26,255,0)";
}

<table id="board" style="width:100%">
  <tr id="head">
    <th>Name</th>
    <th>Out</th>
  </tr>
  <tr id="row1">
    <td id="name">
      Row 1
    </td>
    <td align="center">
      <input onclick="change(event); color(event)" type="button" value="OUT" id="out" style="background-color: red"></input>
    </td>
  </tr>
  <tr id="row2">
    <td id="name">
      Row 2
    </td>
    <td align="center">
      <input onclick="change(event); color(event)" type="button" value="OUT" id="out" style="background-color: red"></input>
    </td>
  </tr>
</table>

如何获得单独的按钮来为各自的行运行相同的功能？

3 个答案: