堆栈内存溢出
  繁体   English   中英

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

[英]Javascript - populate a div with content from a hidden div using click buttons

 原文  2016-11-03 22:01:20  5   7    javascript/ jquery/ button/ click/ display

问题描述

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

这是我的小提琴

7 个解决方案

解决方案1
 4 已采纳  2016-11-03 22:18:03

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

解决方案2
 1  2016-11-03 22:20:15

听起来好像你正在寻找使用按钮本身用数据属性或其他东西填充按钮内置的数据？ 如果是这样，你可以这样做：

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
 1  2016-11-03 22:59:52

如果您希望第一个按钮从第一个隐藏的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() );
  });
});

解决方案4
 0  2016-11-03 22:08:21

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

解决方案5
 0  2016-11-03 22:15:01

在您的代码示例中，您可以执行以下操作： 

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

解决方案6
 0  2016-11-03 22:15:40

不要重复自己！ 要使用RegExp \\D替换""替换为""所有不是数字的数字。

使用ID中的数字

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

jsFiddle演示 

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演示 

jQuery(function ($) {

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

});

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

解决方案7
 0  2016-11-03 22:27:58

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

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 下拉选择将使用隐藏的按钮填充div，然后在单击时使用隐藏的内容填充另一个div 使用JavaScript填充div中的内容 JavaScript单击div以显示隐藏的内容动画 单击 div 后将内容从 div 推送到隐藏输入 单击菜单，将div内容替换为隐藏div 使用数据库中的Javascript向div填充图像 从隐藏的Div加载内容？ Javascript 条件 - 取消选中隐藏 div 中的单选按钮？ 如何使用javascript将隐藏的div标签的内容推到表行？ 隐藏的Div没有使用javascript输出
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM