Javascript 如何在jquery中用另一个内嵌css的代码块替换html代码块？

我试图用另一块html替换一块html代码。但我做不到

这是html块

<div id="book1">
    <div class="page1" style="background: url(modules/mod_test/tmpl/img/new/1.jpg); width:100%;"></div>
    <div class="page2" style="background: url(modules/mod_test/tmpl/img/new/2.jpg); width:100%;"></div>
    <div class="page3" style="background: url(modules/mod_test/tmpl/img/new/3.jpg); width:100%;"></div>
    <div class="page4" style="background: url(modules/mod_test/tmpl/img/new/4.jpg); width:100%;"></div>
</div>

使用此代码块

<div id="book2">
    <div class="page1" style="background: url(modules/mod_test/tmpl/img/new/new1.jpg); width:100%;"></div>
    <div class="page2" style="background: url(modules/mod_test/tmpl/img/new/new2.jpg); width:100%;"></div>
    <div class="page3" style="background: url(modules/mod_test/tmpl/img/new/new3.jpg); width:100%;"></div>
    <div class="page4" style="background: url(modules/mod_test/tmpl/img/new/new4.jpg); width:100%;"></div>
</div>

我用这个代码试过了，但不起作用

$(document).ready(function() {
    $('.test-img').click(function () {
        var lookbook2 = '<div class="page1" style="background: url(../images/book2/new1.jpg); width:100%;"></div>' + '<div class="page1" style="background: url(../images/book2/new2.jpg); width:100%;"></div>';
        $('#book1').append(lookbook2);
    });

$（文档）.ready（函数（）{
$（'.test img'）。单击（函数（）{
var lookbook2=''+''；
$（'#book1'）。追加（lookbook2）；
});

有人能帮我吗？

试试这个：

$(document).ready(function() {
    $('.test-img').click(function() {
        //save book2 html content
        var lookbook2 = $('#book2').html();

        //replace book2 html content with book1 html content
        $('#book2').html($('#book1').html());

        //replace book1 html content with the saved book2 html content
        $('#book1').html(lookbook2);
    });
}

---

要替换整个块，请使用：

$(document).ready(function() {
    $('.test-img').click(function() {                           
        var lookbook2 = '<div id="book2"><div class="page1" style="background: url(../images/book2/new1.jpg); width:100%;"></div>'+'<div class="page1" style="background: url(../images/book2/new2.jpg); width:100%;"></div></div>';
        $('#book1').replaceWith(lookbook2);
    });
});

$（文档）.ready（函数（）{
$（'.test img'）。单击（函数（）{
var lookbook2=''+''；
$（'#book1'）。替换为（lookbook2）；
});
});

要仅替换内容（保持div和ID相同），请使用：

$（文档）.ready（函数（）{
$（'.test img'）。单击（函数（）{
var lookbook2=''+''；
$（'#book1'）.html（lookbook2）；
});
});

替换内容的示例：

---

编辑：使用代码中的图像，我假设您希望在单击带有类测试img的元素时，将div#book1替换为div#book2

试试这个：

$(document).ready(function() {
    $('.test-img').click(function() {                           
        var lookbook2 = '<div id="book2"><div class="page1" style="background: url(modules/mod_test/tmpl/img/new/new1.jpg); width:100%;"></div><div class="page2" style="background: url(modules/mod_test/tmpl/img/new/new2.jpg); width:100%;"></div><div class="page3" style="background: url(modules/mod_test/tmpl/img/new/new3.jpg); width:100%;"></div><div class="page4" style="background: url(modules/mod_test/tmpl/img/new/new4.jpg); width:100%;"></div></div>';
        $('#book1').after(lookbook2);
        $('#book1').remove();
    });
}

$（文档）.ready（函数（）{
$（'.test img'）。单击（函数（）{
var lookbook2=''；
$（#book1'）。在（lookbook2）之后；
$（'#book1'）。删除（）；
});
}

你是想仅仅替换内容还是整个div？

.append（）

意味着添加。如果你想替换某些内容，你可以使用

$target.html（“”）

，因为我可以在两个节点中看到相同的内容，唯一的区别是父节点的id，所以-

$（'book1'）。prop（'id'，'book2'））

@lee_Glading这本书的内容1div@Evgeniy检查url（最后一个文件）…它在块之间是不同的。是的，似乎工作得很好…看看我刚才添加的快速示例。JS fiddle没有本地定义的图像路径；）但我已经用图像更新了。仍然有效。是否要检查新图像的图像路径？检查chrome或其他类似开发工具中的控制台？@anuruddhika应该可以。尝试将div（在html和lookbook2中）的高度和宽度更改为一些像素-并确保您正在单击具有class=“test img”的某个元素

$(document).ready(function() {
    $('.test-img').click(function() {                           
        var lookbook2 = '<div id="book2"><div class="page1" style="background: url(modules/mod_test/tmpl/img/new/new1.jpg); width:100%;"></div><div class="page2" style="background: url(modules/mod_test/tmpl/img/new/new2.jpg); width:100%;"></div><div class="page3" style="background: url(modules/mod_test/tmpl/img/new/new3.jpg); width:100%;"></div><div class="page4" style="background: url(modules/mod_test/tmpl/img/new/new4.jpg); width:100%;"></div></div>';
        $('#book1').after(lookbook2);
        $('#book1').remove();
    });
}