Javascript

Question

我需要一些帮助。正如您将在我的 fiddle 中看到的那样，我正在尝试使用按钮将来自多个隐藏 div 的内容填充到单个容器 div，具体取决于单击哪个按钮。我遇到的问题是，我不知道如何访问隐藏 div 中的实际内容来填充容器 div。到目前为止，我正在使用隐藏 div 的 id 属性来演示我想在容器中显示哪些 div 内容。

我看过一些其他帖子 link <a> 属性引用隐藏内容，但 none 到目前为止使用具有点击功能的按钮元素来更改 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

Answer 1

可以使用html函数，不带参数获取元素内容 with parameter 用字符串参数替换内容

$(document).ready(function (){
    $('#button1').click(function (){
        $('#info').html( $('#option1').html()  );
    });
    $('#button2').click(function (){
                $('#info').html( $('#option2').html()  );
    });
    $('#button3').click(function (){
            $('#info').html( $('#option3').html() );
    });
 });

Answer 2

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

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

Answer 3

不要重复自己！要从 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/

Answer 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>

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

Answer 5

听起来您可能正在寻找使用按钮本身来填充带有数据属性或其他内容的按钮内置数据？如果是这样，您可以这样做：

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

Answer 6

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

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

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

Answer 7

如果你想让第一个按钮加载第一个隐藏的内容 div 等而不依赖于使用id属性，你可以使用 .index() method. When you pass this as an argument it will return the index value of the click event target in the collection $("#button-column .buttons :button"). Afterwards you can pass the index value to the .get() 方法从中检索相应的元素隐藏 divs $("#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() );
  });
});

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

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

jquery

click

button

display

使用 ID 中的号码

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

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

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

javascript

jquery

click

button

display

使用 ID 中的号码

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

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