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

【问题标题】：How to show div content and hide others when button is clicked - JavaScript单击按钮时如何显示 div 内容并隐藏其他内容 - JavaScript
【发布时间】：2020-06-07 13:03:52
【问题描述】：

我只想在单击特定按钮时显示特定的 div。 就像如果单击了 ID 为 #newLD 的按钮，则应显示唯一 ID 为 #createLD 的 div，而其他 div 应保留隐。我需要为我创建的所有三个按钮提供相同的功能。

P.S - 我检查了 Stackoverflow 上的其他解决方案，但代码对我不起作用。他们让它看起来太复杂了。请帮助并建议初学者可以理解的最简单的方法。

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>

【问题讨论】：

到目前为止你有什么尝试？
我尝试了这个解决方案，但这不起作用。他用了这么多让我困惑的 div link
哪种解决方案？
您链接到的解决方案可能是您将获得的最简单的解决方案 - 将带有选择器的 data-show 添加到您想要显示的内容中。解析 ID 是一种反模式。

标签： javascript html jquery

【解决方案1】：

您可以尝试将各个元素与Attribute Starts With Selector [name^="value"] 和Attribute Ends With Selector [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>

【讨论】：

【解决方案2】：

你可以这样做：获取被点击按钮的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>

【讨论】：

【解决方案3】：

$(".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>

【讨论】：