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

Question

I need some help. 我需要一些帮助。 As you will see in my fiddle, I am attempting to use buttons to populate a single container div with content from multiple hidden divs, depending on which button is clicked. 正如您将在我的小提琴中看到的那样，我试图使用按钮来填充单个容器div，其中包含来自多个隐藏div的内容，具体取决于单击的按钮。 The problem I am having is, I don't know how to access the actual content in the hidden divs to populate the container div. 我遇到的问题是，我不知道如何访问隐藏div中的实际内容来填充容器div。 As of now, I am using the id attributes for the hidden divs to demonstrate which div content I would like to display in the container. 截至目前，我正在使用隐藏div的id属性来演示我想在容器中显示哪个div内容。

I've seen a few other posts with link <a> attributes referencing hidden content, but none so far using a button element with click functionality to change div content. 我已经看到其他一些链接<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>

Here is my fiddle 这是我的小提琴

Answer 1

Here's a version that uses jquery data attributes. 这是一个使用jquery数据属性的版本。 It reduces the redundancy and complexity and can be configured easily. 它减少了冗余和复杂性，并且可以轻松配置。

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

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

Answer 2

It sounds like maybe you were looking for using the button itself to populate data built into the button with a data attribute or something? 听起来好像你正在寻找使用按钮本身用数据属性或其他东西填充按钮内置的数据？ If so you can do something like this: 如果是这样，你可以这样做：

HTML 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 jQuery的

$(document).ready(function (){
    $('#button-column button').click(function (){
        $('#info').html($(this).attr('data-info'));
    });
 });

Answer 3

If you want the first button to load the content from the first hidden div etc. without relying upon using the id attributes, you can use the .index() method. 如果您希望第一个按钮从第一个隐藏的div等加载内容而不依赖于使用id属性，则可以使用.index（）方法。 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") . 当您将this作为参数传递时，它将返回集合$("#button-column .buttons :button") click事件目标的索引值。 Afterwards you can pass the index value to the .get() method to retrieve the corresponding element from the collection of hidden divs $("#hiddenDivs .info") . 之后，您可以将索引值传递给.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() );
  });
});

Answer 4

you can use html function, without parameter gets the content of the element with parameter replaces the content with the string parameter 你可以使用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() );
    });
 });

Answer 5

In your code example, you do for example: 在您的代码示例中，您可以执行以下操作：

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

What you instruct to do here, is adding a text string '#option1' to an element with ID info. 你在这里指示做的是向带有ID信息的元素添加文本字符串'＃option1'。

What you intend to do is prepending the content of ID option1 to the element with ID info. 您打算做的是将ID option1的内容添加到具有ID信息的元素中。 You could do something like this instead: 你可以这样做：

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

Another approach could be (but I don't know if that's relevant for you) to not clone content (since it costs you repaints) but toggle the specific elements instead. 另一种方法可能是（但我不知道这是否与您相关）不克隆内容（因为它需要重新绘制），而是切换特定元素。 For example: 例如：

$('#option1,#option2').hide();
$('#option3').hide();

And yet another one: use data-attributes on your buttons: 还有一个：在按钮上使用数据属性：

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

And the JS: 和JS：

$('.button').on('click', function(event) {
    event.preventDefault();
    $('#info').html($(event.currentTarget).attr('data-text'));
});

Answer 6

Don't repeat yourself! 不要重复自己！ To get the number out of an ID replace with "" all that is not a number using RegExp \\D . 要使用RegExp \\D替换""替换为""所有不是数字的数字。

Using number from ID 使用ID中的数字

Than, to get the actual content you can use $("#option"+ num).html() or $("#option"+ num).text() methods: 要获得实际内容，你可以使用$("#option"+ num).html()或$("#option"+ num).text()方法：

jsFiddle demo jsFiddle演示

jQuery(function ($) {

  $('.buttons button').click(function () {
      var num = this.id.replace(/\D/g,"");
      $("#info").html( $("#option"+ num).html() );
  });

});

Target element using `data-` attribute* **使用`data-*`属性的目标元素**

Alternatively you can store inside a data-* attribute the desired target selector ID: 或者，您可以在data-*属性中存储所需的目标选择器ID：

<button data-content="#option1" id="button1">Button 1</button>

and than simply: 而不仅仅是：

jsFiddle demo jsFiddle演示

jQuery(function ($) {

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

});

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

Answer 7

If the expectation is to get same indexed hidden div content, Then the below code should work. 如果期望获得相同的索引隐藏div内容，那么下面的代码应该工作。

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

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

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

问题描述

7 个解决方案

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

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

解决方案3
1 2016-11-03 22:59:52

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

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

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

Using number from ID 使用ID中的数字

Target element using `data-` attribute* **使用`data-*`属性的目标元素**

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

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

问题描述

7 个解决方案

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

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

解决方案3 1 2016-11-03 22:59:52

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

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

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

Using number from ID 使用ID中的数字

Target element using data-* attribute 使用data-*属性的目标元素

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

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

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

解决方案3
1 2016-11-03 22:59:52

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

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

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

Target element using `data-` attribute* **使用`data-*`属性的目标元素**

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