我只想在单击特定按钮时显示特定的div。 例如，如果单击了id为#newld的按钮，则应该显示id为#createld的唯一div，而其他div应该保持隐藏。 我需要为我创建的所有三个按钮提供相同的功能。
注:我检查了Stackoverflow上的其他解决方案，但是代码不适合我。 他们让事情看起来太复杂了。 请帮助并建议一个最容易的，可以被初学者理解的方法。
null
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>null
您可以尝试将相应的元素与以选择器[name^=“value”]开头的属性和以选择器[name$=“value”]结尾的属性进行匹配
null
$('.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>
您可以这样做:获取所单击按钮的id，隐藏id以“create”开头的所有div，只显示具有相应id的div。
null
$(".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>
$(".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>
