单击按钮时如何显示 div 内容并隐藏其他内容 - JavaScript

Question

我想仅在单击特定按钮时才显示特定的 div。就像如果单击带有id#newLD的按钮一样，则应显示id为#createLD的唯一div，而其他div应保持隐藏状态。我创建的所有三个按钮都需要相同的功能。附言 - 我检查了堆栈溢出的其他解决方案，但代码不适合我。它们使它看起来太复杂了。请帮助并建议初学者可以理解的最简单的方法。button {    padding: 20px;    margin: 0 5px 0 0;    border: 0 solid;    text-transform: uppercase;    letter-spacing: 1.5px;    color: #999999;}<div id="button-container">    <button id="newLD" class="myButton">Logo</button>    <button id="newVC" class="myButton">Visiting Card</button>    <button id="newFD" class="myButton">Flyer Design</button></div>    <div id="createLD" style="display: none">        <p>Here is the lofo design div</p>    </div>    <div id="createVC" style="display: none">        <p>Here is the visitng card design div</p>    </div>    <div id="createFD" style="display: none">        <p>Here is the flyer design design div</p>    </div>

Answer 1

您可以尝试将相应的元素与“属性以选择器开头”[name^=“value”]和“属性以选择器结尾”[name$=“value”]

$('.myButton').click(function(){

  $('div[id^=create]').hide(); //hide all

  var id = $(this).attr('id'); //get the id of the clicked button

  var end = id.slice(-2);      //get last 2 character (LD/VC/FD) from id

  $(`div[id$=${end}]`).show(); //match the div with id ends with the character and show

});

button {

  padding: 20px;

  margin: 0 5px 0 0;

  border: 0 solid;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: #999999;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="button-container">

  <button id="newLD" class="myButton">Logo</button>

  <button id="newVC" class="myButton">Visiting Card</button>

  <button id="newFD" class="myButton">Flyer Design</button>

</div>

<div id="createLD" style="display: none">

  <p>Here is the lofo design div</p>

</div>

<div id="createVC" style="display: none">

  <p>Here is the visitng card design div</p>

</div>

<div id="createFD" style="display: none">

  <p>Here is the flyer design design div</p>

</div>

Answer 2

$(".myButton").on("click", function() {

  let id = $(this).attr("id");

if(id=='newLD'){

  $('createLD').show()

$('createVC').hide()

$('createFD').hide()

}

else if(id=='newVC'){

  $('createVC').show()

$('createLD').hide()

$('createFD').hide()

}

else if(id=='newFD'){

  $('createFD').show()

$('createVC').hide()

$('createLD').hide()

}

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="button-container">

  <button id="newLD" class="myButton">Logo</button>

  <button id="newVC" class="myButton">Visiting Card</button>

  <button id="newFD" class="myButton">Flyer Design</button>

</div>

<div id="createLD" style="display: none">

  <p>Here is the lofo design div</p>

</div>

<div id="createVC" style="display: none">

  <p>Here is the visitng card design div</p>

</div>

<div id="createFD" style="display: none">

  <p>Here is the flyer design design div</p>

</div>

Answer 3

您可以这样操作：获取单击的按钮的 id，隐藏 ID 以“create”开头的所有 div，并仅显示具有相应 id 的 div。

$(".myButton").on("click", function() {

  let id = $(this).attr("id");

  id = id.substr(3);

  $("div[id^='create']").hide();

  $("div[id='create" + id + "']").show();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="button-container">

  <button id="newLD" class="myButton">Logo</button>

  <button id="newVC" class="myButton">Visiting Card</button>

  <button id="newFD" class="myButton">Flyer Design</button>

</div>

<div id="createLD" style="display: none">

  <p>Here is the lofo design div</p>

</div>

<div id="createVC" style="display: none">

  <p>Here is the visitng card design div</p>

</div>

<div id="createFD" style="display: none">

  <p>Here is the flyer design design div</p>

</div>