Javascript - 使用点击按钮使用隐藏 div 中的内容填充 div答案

【问题标题】：Javascript - populate a div with content from a hidden div using click buttonsJavascript - 使用点击按钮使用隐藏 div 中的内容填充 div
【发布时间】：2017-03-17 15:45:26
【问题描述】：

我需要一些帮助。正如您将在我的小提琴中看到的那样，我正在尝试使用按钮来填充单个容器 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>

这里是my fiddle

【问题讨论】：

标签： javascript jquery button click display

【解决方案1】：

这是一个使用 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>

例如：https://jsfiddle.net/yvsu6qfw/3/

【讨论】：

非常感谢！这正是我需要的方式。你摇滚！！
很高兴为您提供帮助:)
Dino，你能帮我理解一下 ("#" + $(this).data('link') 的用法吗？
@icunning, $(this).data('link') 提取按钮元素的 data-attr 'link'，它为您提供 option1、option2、option3 等。使用 '#'作为一个 id 标识符，所以在整个表达式之后，你得到 ('#option1")
感谢您的解释和回答！帮助我完成了原型。 :)

【解决方案2】：

听起来您可能正在寻找使用按钮本身来使用数据属性或其他东西填充按钮内置的数据？如果是这样，您可以执行以下操作：

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'));
    });
 });

【讨论】：

感谢您的回答！我选择了另一个适合我的目的。

【解决方案3】：

如果您希望第一个按钮从第一个隐藏的 div 等加载内容而不依赖于使用 id 属性，您可以使用.index() 方法。当您将this 作为参数传递时，它将返回集合$("#button-column .buttons :button") 中单击事件目标的索引值。之后，您可以将索引值传递给.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() );
  });
});

【讨论】：

感谢您的回答！我选择了另一个适合我的目的。

【解决方案4】：

可以使用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() );
    });
 });

【讨论】：

感谢您的回答！我选择了另一个适合我的目的。

【解决方案5】：

在您的代码示例中，例如：

$('#info').prepend('#option1');

您在此处指示执行的操作是将文本字符串“#option1”添加到具有 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'));
});

【讨论】：

感谢您的回答！我选择了另一个适合我的目的。

【解决方案6】：

不要重复自己！要从 ID 中获取数字，请使用 RegExp \D 替换所有不是数字的 ""。

使用 ID 中的数字

然后，要获取实际内容，您可以使用$("#option"+ num).html() 或$("#option"+ num).text() 方法：

jsFiddle demo

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>

而不仅仅是：

jsFiddle demo

jQuery(function ($) {

  $("[data-content]").click(function () {
      $("#info").html( $(this.dataset.content).html() );
  });

});

http://api.jquery.com/html/
http://api.jquery.com/text/

【讨论】：

感谢您的回答！我选择了另一个适合我的目的。

【解决方案7】：

如果期望获得相同的索引隐藏 div 内容，那么下面的代码应该可以工作。

$(document).ready(function (){
        $('.buttons button').click(function (){
            $('#info').empty();

            var index = $('.buttons button').index($(this));
            $('#info').html($('.info:eq('+index+')').html());
        });
    });

【讨论】：

使用 ID 中的数字

使用data-*属性的目标元素

使用`data-*`属性的目标元素