我需要一些帮助。正如您将在我的小提琴中看到的那样,我试图使用按钮来填充单个容器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>
这是一个使用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>
听起来好像你正在寻找使用按钮本身用数据属性或其他东西填充按钮内置的数据?如果是这样,你可以这样做:
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'));
});
});
如果您希望第一个按钮从第一个隐藏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() );
});
});
你可以使用html函数,不带参数获取带参数的元素的内容用string参数替换内容
$(document).ready(function (){
$('#button1').click(function (){
$('#info').html( $('#option1').html() );
});
$('#button2').click(function (){
$('#info').html( $('#option2').html() );
});
$('#button3').click(function (){
$('#info').html( $('#option3').html() );
});
});
在您的代码示例中,您可以执行以下操作:
$('#info').prepend('#option1');
你在这里指示做的是向带有ID信息的元素添加文本字符串'#option1'。
您打算做的是将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'));
});
不要重复自己!要使用RegExp ""
将数字替换为\D
,而不是数字。
比,要获得实际内容,您可以使用$("#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-*
attribute或者,您可以在data-*
属性中存储所需的目标选择器ID:
<button data-content="#option1" id="button1">Button 1</button>
而不仅仅是:
jQuery(function ($) {
$("[data-content]").click(function () {
$("#info").html( $(this.dataset.content).html() );
});
});
如果期望获得相同的索引隐藏div内容,那么下面的代码应该工作。
$(document).ready(function (){
$('.buttons button').click(function (){
$('#info').empty();
var index = $('.buttons button').index($(this));
$('#info').html($('.info:eq('+index+')').html());
});
});