Question

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

像这样 - ＆gt;

image1 image2 image3

如果image1点击加载gallery1，如果image2点击加载gallery2 lick vice。

这是我的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 - ＆gt;

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

例如：http://api.jquery.com/replacewith/

Answer 2

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

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

注意 - 请确保所有id在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();
  });
});

Answer 3

选中此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');
});

Answer 4

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

你可以试试$（“＃book1”）。attr（“src”，[你的新src]）;

如果你想点击...

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

希望有所帮助

如何在jquery img中替换html代码

4 个答案: