如何從其他div動態地將內容加載到div中

Question

我想從同一頁面上divs的內容加載到它們按鈕按下的按鈕的動態div中。比方說，如果按某個div的按鈕被按下，該內容應該加載該特定的div。

<!-- CONTENT SOURCE --> 
 
<div class="box"><!-- SOME CONTENT --><button></button></div> 
 
<div class="box"><!-- SOME CONTENT --><button></button></div> 
 
<div class="box"><!-- SOME CONTENT --><button></button></div> 
 
<div class="box"><!-- SOME CONTENT --><button></button></div> 
 

 
<!-- CONTENT UPDATE CONTAINER --> 
 
<div class="box-load"> 
 
    <!-- LOAD CONTENT FROM THE BOXES HERE, RESPECTIVE OF THEIR BUTTONS --> 
 
</div>

Answer 1

<!-- CONTENT SOURCE --> 
 
<div class="box">button1<!-- SOME CONTENT --><button>button1</button></div> 
 
<div class="box">button2<!-- SOME CONTENT --><button>button2</button></div> 
 
<div class="box">button3<!-- SOME CONTENT --><button>button3</button></div> 
 
<div class="box">button4<!-- SOME CONTENT --><button>button4</button></div> 
 

 
<!-- CONTENT UPDATE CONTAINER --> 
 
<div class="box-load"> 
 
    <!-- LOAD CONTENT FROM THE BOXES HERE, RESPECTIVE OF THEIR BUTTONS --> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script type="text/javascript"> 
 
    (function ($) { 
 
     $('.box button').on('click',function(){ 
 
      var $element = $(this).closest('.box').clone(); 
 
       
 
      $('button', $element).remove(); 
 
      $('.box-load').html($element.html()); 
 
     }); 
 
    })(jQuery); 
 
</script>

Answer 2

沒有jQuery的：

function show(cid){ 
 
var content = document.getElementById(cid).innerHTML; 
 
document.getElementById("box-load").innerHTML = content; 
 
}

<!-- CONTENT SOURCE --> 
 
<div class="box"><div id="1">1a</div><button onclick="show('1')"></button></div> 
 
<div class="box"><div id="2">2b</div><button onclick="show('2')"></button></div> 
 
<div class="box"><div id="3">3c</div><button onclick="show('3')"></button></div> 
 
<div class="box"><div id="4">4d</div><button onclick="show('4')"></button></div> 
 

 
<!-- CONTENT UPDATE CONTAINER --> 
 
<div id="box-load"> 
 
    <!-- LOAD CONTENT FROM THE BOXES HERE, RESPECTIVE OF THEIR BUTTONS --> 
 
</div>

Answer 3

$('.box button').on('click',function(){ 
    var e = $(this).closest('.box').clone(); 
    $('button', e).remove(); //remove the button to get only the content you want 
    $('.box-load').html(e.html()); 
}); 

Answer 4

使用jQuery和改變HTML一點，我想出了這個解決方案：

$("button").click(function(){ 
 
    var text = $(this).prev().text(); 
 
    $(".box-load").text(text); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- CONTENT SOURCE --> 
 
<span class="box">Content 1</span><button>1</button><br> 
 
<span class="box">Content 2</span><button>2</button><br> 
 
<span class="box">Content 3</span><button>3</button><br> 
 
<span class="box">Content 4</span><button>4</button><br> 
 
<br> 
 
<!-- CONTENT UPDATE CONTAINER --> 
 
<div class="box-load"> 
 
    <!-- LOAD CONTENT FROM THE BOXES HERE, RESPECTIVE OF THEIR BUTTONS --> 
 
</div>

Answer 5

假設初始內容是在div，prev（）將給同性戀容器的對象。假設你正在使用jQuery

$('.box button').on('click',function(){ 
      var html = $(this).prev().html(); 
      $('.box-load').html(html); 
     }); 

希望它可以幫助

該解決方案將只給你它裏面的內容，而不是按鈕。