用另一个div jQuery的内容替换Div的内容 [英] Replace content of Div with content of another div jQuery

问题描述

我想通过单击图像将div的内容替换为另一个div（使用css隐藏）的内容。然而，使用这里建议的一些方法我似乎无法使其工作。

I would like to replace the content of a div with the contents of another div (which is hidden using css) by clicking on an image. However using a few methods suggested on here I can't seem to get it working.

我的代码如下：

html

<h3>Recent Callaborations</h3>
    <div id="collaborations">
    <img class="rec1" src="http://domain.com/michaelscott/wp-content/uploads/2013/02/url.png"/>
    <div id="rec1">Some image caption that is hidden now and that will replace what is in the rec div below</div>
 </div>

<div id="rec-box" class="rec">
    this is the content that is to be replaced
</div>

js

jQuery(document).ready(function() {
        jQuery(".rec1").click(function(event) {
            event.preventDefault() 
            jQuery('#rec-box').html($(this).next('#rec1')[0].outerHTML); 
          });
        });

css

#collaborations {
    width: 100%;    
    margin:0 0 10px 0;
    padding:0;
}

#collaborations img {
    display:inline-block;
}
.rec {
    background: #EDEDED;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 10px;
}
#rec1, #rec2, #rec3, #rec4 {
    display:none;
}

推荐答案

你只需要设置 html（）正确的 div 。试试这个：

You simply need to set the html() of the correct div. Try this:

jQuery(document).ready(function() {
    jQuery(".rec1").click(function(event) {
        event.preventDefault() 
        jQuery('#rec-box').html(jQuery(this).next().html()); 
    });
});

这篇关于用另一个div jQuery的内容替换Div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！