Question

我有大约30个用于server1的URL和30个用于server2的URL。我希望Java脚本泛型函数根据复选框选择隐藏和显示URL。

例如： checkbox1 URL1（默认隐藏）URL2（默认可见）[如果选中此复选框，则仅显示URL1和Hide URL2，反之亦然]

checkbox2 URL3（默认隐藏）URL4（默认可见）[如果选中此复选框，则仅显示URL3，然后隐藏URL4，反之亦然]

checkbox3 URL5（默认隐藏）URL5（默认可见）[如果选中此复选框，则仅显示URL5，然后隐藏URL6，反之亦然]

我可以选中和取消选中任何一个复选框。每个复选框应仅处理针对它提到的特定对。

我已经编写了一个函数，但是它仅适用于一对URL。我不知道如何确保Give复选框可以与特定的URL一起使用。

function toggle_urls(checkbox) {
  var id2 = checkbox.id;
  var search_pattern2 = /checkbox(.*?)$/g;
  var number2 = search_pattern2.exec(id2);
  number2 = number2[1];
  box_id2 = 'box' + number2;
  var box2 = document.getElementById(box_id2);
  if (checkbox.checked) {
    box2.style.display = 'inline';
  } else {
    box2.style.display = 'none';
  }
  var id3 = checkbox.name;
  var search_pattern3 = /checkbox(.*?)$/g;
  var number3 = search_pattern3.exec(id3);
  number3 = number3[1];
  box_id3 = 'box' + number3;
  var box3 = document.getElementById(box_id3);
  if (checkbox.checked) {
    box3.style.display = 'none';
  } else {
    box3.style.display = 'inline';
  }
}

<li>
  <label>Toggle</label>
  <input onChange="toggle_urls(this)" id="checkbox2" name=checkbox3 type="checkbox">
  <a id="box2" style="display:none;" href="URL1">Server1 URL1</a>
  <a id="box3" style="display:inline;" href="URL2">Server2 URL2</a>
</li>
<li>
  <label>Toggle2</label>
  <input onChange="toggle_urls(this)" id="checkbox2" name=checkbox3 type="checkbox">
  <a id="box2" style="display:none;" href="URL3">Server1 URL3</a>
  <a id="box3" style="display:inline;" href="URL4">Server2 URL4</a>
</li>

我想要一个特定的复选框来显示/隐藏一对URL。将设置15个复选框和15个URL。

Answer 1

您可能正在解决您的解决方案...

~~您有一系列选择，一次只能选择一个选项。您可以使用单选按钮来代替复选框。~~

可以使用CSS代替使用JavaScript进行显示/隐藏。

~~使用单选按钮，您需要确保name字段与每个单选按钮+标签的ID唯一匹配（以将它们绑定到一个组中）。~~

label a.link2{ display: none; }
input:checked + label a.link1{ display: none; }
input:checked + label a.link2{ display: inline; }

<h2>Group 1</h2>

<input type="checkbox" name="group1" id="url1" checked>
<label for="url1">
  <a href="https://www.google.com" class="link1">GOOGLE.COM</a>
  <a href="https://www.facebook.com" class="link2">FACEBOOK.COM</a>
</label>

<h2>Group 2</h2>

<input type="checkbox" name="group2" id="url3" checked>
<label for="url3">
  <a href="https://stackoverflow.com" class="link1">STACKOVERFLOW.COM</a>
  <a href="https://www.twitter.com" class="link2">TWITTER.COM</a>
</label>

Answer 2

来自doug的CSS解决方案可能是您想要的解决方案。但是，如果要使用js进行操作，那么这是一个更优雅的示例。

您可以使用ggplot(df,aes(weekday)) + geom_bar(aes(fill = name)) + scale_y_continuous(labels = function(x) x/2)附加事件。您可以使用this关键字获取当前单击的元素。

addEventListener

document.querySelectorAll('.urlToggler').forEach((checkbox) => {
  checkbox.addEventListener('click', function() {
      this.parentNode.querySelector('.firstUrl').style.display = this.checked ? 'inline' : 'none';
      this.parentNode.querySelector('.secondUrl').style.display = this.checked ? 'none' : 'inline';
  });
});

Javascript函数以HTML显示/隐藏URL

2 个答案: