如何在jquery img click中替换html代码答案

【问题标题】：How to replace html code in jquery img click如何在jquery img click中替换html代码
【发布时间】：2015-01-31 13:29:31
【问题描述】：

我是 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？

【问题讨论】：

为它创建一个小提琴。jsfiddle.net
您要加载的图库在哪里？
它就像一本画册。所以我想用新的 pages2 div 替换那个 pages div

标签： javascript jquery html

【解决方案1】：

您可以尝试下面的代码，您可以在其中将数据属性data-gallary 添加到图像，其值等于页面的id div。在页面div添加id，如下图。

现在您需要根据点击的图像隐藏和显示页面。

注意 - 请确保所有 ids 在整个 HTML 中都是唯一的。

HTML：

<div>
<img id="book1" src="image1.jpg" data-gallary="page1">
<img id="book2" src="image2.jpg"  data-gallary="page2">
</div>

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

jQuery:

$(function(){
  $('img[id^=book]').click(function(){
   //hide all pages
   $('div[id^=page]').hide();
   //show corresponding page
   var pageId= $(this).data('gallary');
   $('#'+pageId).show();
  });
});

【讨论】：

我想替换

用这样的新代码和不同的图像
您能否与您的问题陈述分享一个 jsfiddle 链接。从哪里获取新图片，它们是 html 代码还是动态获取/
我在 Joomla 模块中使用了这个。

【解决方案2】：

查看fiddle

简单的 jQuery 代码

$("#book1").click(function(){
  $('#page1').attr('src','http://placehold.it/350x150.gif');
  $('#page2').attr('src','http://placehold.it/150x150.gif');
  $('#page3').attr('src','http://placehold.it/100x100.gif');
});

 $("#book2").click(function(){
  $('#page1').attr('src','http://placehold.it/300x300.gif');
  $('#page2').attr('src','http://placehold.it/150x150.gif');
  $('#page3').attr('src','http://placehold.it/100x100.gif');
});

【讨论】：

【解决方案3】：

如果你只是想改变 img src，你可以使用它。

你可以试试 $("#book1").attr("src",[your new src]);

如果你想点击...

$("#book1").click(function(){
    $("#book1").attr("src",[your new src]);
});

希望有帮助

【讨论】：

我不能用这个改变css吗？
我可以替换这个

with
是的。使用 $("#book1").css("background-image:");

【解决方案4】：

你可以试试这个：-

<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/

【讨论】：