我需要一些帮助。正如您将在我的小提琴中看到的那样，我试图使用按钮来填充单个容器div，其中包含来自多个隐藏div的内容，具体取决于单击的按钮。我遇到的问题是，我不知道如何访问隐藏div中的实际内容来填充容器div。截至目前，我正在使用隐藏div的id属性来演示我想在容器中显示哪个div内容。
我已经看过一些其他帖子，其中链接<a>属性引用了隐藏内容，但到目前为止还没有使用带有点击功能的按钮元素来更改div内容。
jQuery(function ($) {
$('#button1').click(function () {
$('#info').empty();
$('#info').prepend('#option1');
});
$('#button2').click(function () {
$('#info').empty();
$('#info').prepend('#option2');
});
$('#button3').click(function () {
$('#info').empty();
$('#info').prepend('#option3');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1">Button 1</button></li>
<li class="buttons"><button id="button2">Button 2</button></li>
<li class="buttons"><button id="button3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
答案 0 :(得分：4)
这是一个使用jquery数据属性的版本。它减少了冗余和复杂性，并且可以轻松配置。
<body>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1" data-link="option1">Button 1</button></li>
<li class="buttons"><button id="button2" data-link="option2">Button 2</button></li>
<li class="buttons"><button id="button3" data-link="option3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info">
</div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
</body>
<script>
$('.buttons button').click(function (){
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
</script>
答案 1 :(得分：1)
听起来好像你正在寻找使用按钮本身用数据属性或其他东西填充按钮内置的数据？如果是这样，你可以这样做：
<强> HTML
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button data-info="Box">Button 1</button></li>
<li class="buttons"><button data-info="Google Drive">Button 2</button></li>
<li class="buttons"><button data-info="Box">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
<强>的jQuery
$(document).ready(function (){
$('#button-column button').click(function (){
$('#info').html($(this).attr('data-info'));
});
});
答案 2 :(得分：1)
如果您希望第一个按钮从第一个隐藏的div等加载内容而不依赖于使用id属性，则可以使用.index()方法。当您将this作为参数传递时，它将返回集合$("#button-column .buttons :button")中的click事件目标的索引值。之后，您可以将索引值传递给.get()方法，以从隐藏div $("#hiddenDivs .info")的集合中检索相应的元素。
$().ready(function(){
$("#button-column .buttons :button").on("click", function(){
$('#info').empty();
var clickedIndex = $("#button-column .buttons :button").index(this);
var hiddenInfo = $("#hiddenDivs .info").get(clickedIndex);
$('#info').prepend( $(hiddenInfo).text() );
});
});
答案 3 :(得分：0)
你可以使用html函数，不带参数获取元素的内容 with参数用字符串参数
替换内容$(document).ready(function (){
$('#button1').click(function (){
$('#info').html( $('#option1').html() );
});
$('#button2').click(function (){
$('#info').html( $('#option2').html() );
});
$('#button3').click(function (){
$('#info').html( $('#option3').html() );
});
});
答案 4 :(得分：0)
在您的代码示例中，例如：
$('#info').prepend('#option1');
你在这里要做的是添加一个文本字符串＆＃39;＃option1＆＃39;到具有ID信息的元素。
您打算做的是将ID option1的内容添加到具有ID信息的元素中。你可以这样做：
$('#info').prepend($('#option1').html());
另一种方法可能是（但我不知道这是否与您相关）不克隆内容（因为它需要重新制作），而是切换特定元素。例如：
$('#option1,#option2').hide();
$('#option3').hide();
还有一个：在按钮上使用数据属性：
<a href="#" data-text="Box" class="button">Button 1</a>
<a href="#" data-text="Another text" class="button">Button 2</a>
<div id="info">
</div>
和JS：
$('.button').on('click', function(event) {
event.preventDefault();
$('#info').html($(event.currentTarget).attr('data-text'));
});
答案 5 :(得分：0)
""，请使用\D替换所有不是数字的ID。
要获得实际内容，您可以使用$("#option"+ num).html()或$("#option"+ num).text()方法：
jQuery(function ($) {
$('.buttons button').click(function () {
var num = this.id.replace(/\D/g,"");
$("#info").html( $("#option"+ num).html() );
});
});
data-*属性或者，您可以在data-*属性中存储所需的目标选择器ID：
<button data-content="#option1" id="button1">Button 1</button>
而不仅仅是：
jQuery(function ($) {
$("[data-content]").click(function () {
$("#info").html( $(this.dataset.content).html() );
});
});
答案 6 :(得分：0)
如果期望得到相同的索引隐藏div内容，那么下面的代码应该可以工作。
{{1}}