如何使用按钮在 html using JavaScript 中的元素之间循环

Question

我的问题是我试图使用按钮在 HTML 个元素之间循环。我想在按下关联按钮时显示一个元素并隐藏其他元素。

我当前的代码使用 jquery 的显示和隐藏，我不确定这些是否最适合我正在尝试做的事情。我最终将使用大约 14 个按钮和 14 个不同的 div 元素。数组可能更适合我正在尝试做的事情。

此代码不会在按下按钮时显示或隐藏任何内容。我希望代码显示与每个按钮关联的元素并隐藏所有其他元素。

$(function() {
  $('div1Button').click(function() {
    $('#div1').show();
    $('#div2').hide();
    $('#div3').hide();
  });
  $('div2Button').click(function() {
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
  });
  $('div3Button').click(function() {
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="div1Button">Div1</button>
<button id="div2Button">Div2</button>
<button id="div3Button">Div3</button>

<div id="div1">
  Hello Im div1
</div>

<div id="div2">
  Hello Im div2
</div>

<div id="div3">
  Hello Im div3
</div>

Answer 1

您在选择按钮时忘记添加 #。

$(function() {
  $('#div1Button').click(function() {
    $('#div1').show();
    $('#div2').hide();
    $('#div3').hide();
  });
  $('#div2Button').click(function() {
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
  });
  $('#div3Button').click(function() {
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="div1Button">Div1</button>
<button id="div2Button">Div2</button>
<button id="div3Button">Div3</button>

<div id="div1">
  Hello Im div1
</div>

<div id="div2">
  Hello Im div2
</div>

<div id="div3">
  Hello Im div3
</div>

Answer 2

你应该给你显示的 div 一个 css class，然后每隔一个隐藏（或给一个 "hidden" class）div 没有 class.

它将使您的代码可扩展并减少冗余。

Answer 3

您应该使用 class 作为您的按钮和您的 div 而不是 id，然后使用数据属性来定位点击按钮时 div 将显示的目标。

示例：

$(".toggleButton").on("click", function() {
  var target = $(this).data("target");
  $(".toggleDiv").hide();  // Hide all div
  $(target).show();  // Show the target div
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggleButton" data-target="#div1">Div1</button>
<button class="toggleButton" data-target="#div2">Div2</button>
<button class="toggleButton" data-target="#div3">Div3</button>

<div class="toggleDiv" id="div1">
  Hello Im div1
</div>

<div class="toggleDiv" id="div2">
  Hello Im div2
</div>

<div class="toggleDiv" id="div3">
  Hello Im div3
</div>

如何使用按钮在 html using JavaScript 中的元素之间循环

How to cycle between elements in html using JavaScript using buttons

html

javascript

jquery

show

hide