Question

我的网页上有几个按钮，每个按钮都是打开或关闭的选项，因此默认情况下它们将为绿色（打开），但是在单击后我希望它们为红色（关闭）。我能够解决这个问题，但是无论我单击哪个按钮，只有一个按钮会更改颜色。这是我的代码

  function toggleButton() {
    var element = document.getElementById("btn");
    element.classList.toggle("btn-off");
  }

  <div class="container">
    <div class="key">
      <button id="btn" class="option-btn" onclick="toggleButton()">A</button>
    </div>
    <div class="key">
      <button id="btn" class="option-btn" onclick="toggleButton()">B</button>
    </div>
    <div class="key">
      <button id="btn" class="option-btn" onclick="toggleButton()">C</button>
    </div>
    <div class="key">
      <button id="btn" class="option-btn" onclick="toggleButton()">D</button>
    </div>
  </div>

然后在我的CSS中，将'btn-off'类标记为红色。

这仅适用于第一个按钮。如果单击任何其他按钮，则第一个按钮仍会更改颜色。我知道我可以通过给每个按钮一个不同的id并为每个按钮编写一个不同的函数来使其工作，但是我希望避免重复。有任何提示/建议吗？（此处是初级开发人员）

Answer 1

更改

onclick="toggleButton()"

到

onclick="toggleButton(this)"

然后将方法更改为

function toggleButton(button) {
    button.classList.toggle("btn-off");
  }

部分问题是您要重复输入ID。但是对于您正在做的事情，如果传入被单击的元素，则不需要ID。

Answer 2

请测试以下代码：

html

<body>
    <div class="color-red" id="test-div"></div>
    <button type="button" name="test" id="test" onclick="changeColor();">Click Me!</button>
</body>

css

.color-red{
    background-color:red;
    width:100px;
    height:100px;
}
.color-blue{
    background-color:blue;
    width:100px;
    height:100px;
}

js

function changeColor(){
    document.getElementById("test-div").classList.remove('color-red');
    document.getElementById("test-div").classList.add('color-blue');
}

Answer 3

如果按钮数量有限，则可以选择快速方式：

HTML：

<div class="key">
  <button id="btn1" class="option-btn" onclick="toggleButton(1)">A</button>
</div>
<div class="key">
  <button id="btn2" class="option-btn" onclick="toggleButton(2)">B</button>
</div>
<div class="key">
  <button id="btn3" class="option-btn" onclick="toggleButton(3)">C</button>
</div>
<div class="key">
  <button id="btn4" class="option-btn" onclick="toggleButton(4)">D</button>
</div>

JavaScript：

  function toggleButton(n) {
    var element = document.getElementById('btn' + n);
    element.style.color = 'red'; //OR YOUR TOGGLE CLASS
  }

但是，如果您有大量按钮，则应使用Javascript动态创建IDS，并使用单击的按钮ID 更改其颜色。

Answer 4

您只需在jQuery上执行此操作，即可解决您的问题。谢谢

 $(document).ready(function(){
    $(".option-btn").on("click",function(){
      if($(this).hasClass("btn-off")){
          $(this).addClass("btn-on");
          $(this).removeClass("btn-off");
      }else{
          $(this).removeClass("btn-on");
          $(this).addClass("btn-off");
      }
    });
 });

.btn-off{
    background-color:#EFF0F1;
}
.btn-on{
    background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="container">
    <div class="key">
      <button id="btn" class="option-btn btn-off">A</button>
    </div>
    <div class="key">
      <button id="btn" class="option-btn btn-off">B</button>
    </div>
    <div class="key">
      <button id="btn" class="option-btn btn-off">C</button>
    </div>
    <div class="key">
      <button id="btn" class="option-btn btn-off">D</button>
    </div>
</div>

Answer 5

这是另一种处理方式。您不应有多个重复的mask = np.array([ [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1] ]) def erosion(image, mask): mask_size = mask.shape[0] left_half = int(mask_size / 2) right_half = int(mask_size / 2) if mask_size % 2 == 0: right_half += 1 result = image.copy() # Идем по изображению for i in range(left_half, result.shape[0] - right_half): for j in range(left_half, result.shape[1] - right_half): left_border = int(mask_size / 2) mask_i = 0 mask_j = 0 flag = False right_border = left_border if mask_size % 2 != 0: right_border += 1 # Идем по маске, перебираем каждый элемент маски for k in range(i - left_border, i + right_border): mask_j = 0 for l in range(j - left_border, j + right_border): if mask[mask_i, mask_j] == 1 and image[k, l] == 0: result[i, j] = 0 flag = True break mask_j += 1 mask_i += 1 if(flag): break if not (flag): result[i, j] = 255 return result属性，因此我使用id类代替进行定位。

每个按钮都以toggle-button类开头，因为您提到要默认启用它们。单击一个将切换该类。没有它，它会退回到“关闭”状态，样式为红色。

btn-on

$(document).ready(function() {
  $('.toggle-button').on('click', function() {
    $(this).toggleClass('btn-on');
  });
});

.toggle-button {
  background-color: red;
}
.toggle-button.btn-on {
  background-color: green;
}

从绿色点击为红色后，需要更改页面上各个开/关按钮的颜色

5 个答案: