堆棧內存溢出
  簡體   English   中英

Javascript - 使用單擊按鈕使用隱藏div中的內容填充div

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

 原文  2016-11-03 22:01:20  6   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