javascript - 如何替换jquery img click中的html代码

Question

我是 jquery 新手。我尝试在单击脚本中的图像时加载图库。我想在单击顶部图像时替换图像 src 链接。

像这样-->

图片1 图片2 图片3

如果 image1 点击加载 gallery1，如果 image2 点击加载 gallery2 舔副。

这是我的 html 代码

<div>
<img id="book1" src="image1.jpg">
<img id="book2" src="image2.jpg">
</div>

<div id="pages">
<div style="background: url(1.jpg); width:100%;"></div>
<div style="background: url(2.jpg); width:100%;"></div>
<div style="background: url(3.jpg); width:100%;"></div>
<div>

我想更换这个

<div id="pages">
    <div style="background: url(1.jpg); width:100%;"></div>
    <div style="background: url(2.jpg); width:100%;"></div>
    <div style="background: url(3.jpg); width:100%;"></div>
    <div>

进入

<div id="pages">
    <div style="background: url(new1.jpg); width:100%;"></div>
    <div style="background: url(new2.jpg); width:100%;"></div>
    <div style="background: url(new3.jpg); width:100%;"></div>
    <div>

我只是想替换html谁能帮我写这个jquery？

Answer 1

你可以试试这个:-

<div id="demo">
<img id="book1" src="image1.jpg" class="image1">
<img id="book2" src="image2.jpg" class="image2">
<img id="book3" src="image3.jpg" class="image3">
</div>
<div id="pages">
<div id="image1" style="background: url(1.jpg); width:100%;"></div>
<div id="image2" style="background: url(2.jpg); width:100%;"></div>
<div id="image3" style="background: url(3.jpg); width:100%;"></div>
<div>

javascript ->

$(document).on("click","#demo img",function(){
 var  $self= $(this);
 selfId = '#' + $self.attr('class'),
 $("#pages").replaceWith($("#"+selfId) );
});

示例:http://api.jquery.com/replacewith/