Question

我正在经历一场真正的斗争。

这适用于网上商店。我有一个＆＃34;大图像＆＃34;和一些拇指图像。当我点击大图像时，我想用其他图像打开一个灯箱库。

我还想尝试做的是，当我按下拇指图像时，我想交换位置并与大图像链接。因此，按下的拇指变成大图像，大图像变成拇指图像。

我已经尝试了好几个小时，似乎没有让它发挥作用。

这是HTML结构：

<div id="gallery" style="max-width: 400px;">

    <div class="image">
        <a href="http://image/cache/data/50RO160-600x600.jpg" title="50 Speeds Of Play - Gray Steel" class="zoomThis" data-lightbox="bilder">
            <img src="http://image/cache/data/50RO160-388x388.jpg" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" id="main-img" width="388" height="388">
        </a>
    </div>


    <ul>
        <li id="1" style="float: left;">
            <a href="http://image/cache/data/50RO160-03-600x600.jpg" class="thumb-link-1" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder"></a>
            <img src="http://image/cache/data/50RO160-03-74x74.jpg" class="thumb-img-1" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74">

        </li>

        <li id="2" style="float: left;">
            <a href="http://image/cache/data/50RO160-02-600x600.jpg" class="thumb-link-2" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder"></a>
            <img src="http://image/cache/data/50RO160-02-74x74.jpg" class="thumb-img-2" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74">

        </li>

        <li id="3" style="float: left;">
            <a href="http://image/cache/data/50RO160-04-600x600.jpg" class="thumb-link-3" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder"></a>
            <img src="http://image/cache/data/50RO160-04-74x74.jpg" class="thumb-img-3" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74">

        </li>

        <li id="4" style="float: left;">
            <a href="http://image/cache/data/50RO160-05-600x600.jpg" class="thumb-link-4" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder"></a>
            <img src="http://image/cache/data/50RO160-05-74x74.jpg" class="thumb-img-4" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74">

        </li>
    </ul>
    <div style="clear: both;"></div>
</div>

这是我迄今为止使用的javascript（还有很多其他人），但我无法让它工作：

<script type="text/javascript">
$("#gallery li").click(function() {
    var id = $(this).attr('id'); //Getting the ID of the LI that is pressed
    var oldBIGIMG = $("#main-img").attr('src'); //Getting the OLD big img link
    var oldBIGLINK = $(".zoomThis").attr('href'); //Getting the OLD big ahref
    var newBIGIMG = $(".thumb-img-" + id).attr('src'); //Getting the OLD thumb img
    var newBIGLINK = $(".thumb-link-" + id).attr('href'); //Getting the OLD link

    $("#main-img").attr('src',newBIGIMG.replace('74x74', '600x600')); //Makeing the OLD thumb img BIG by replaceing 74x74 with 600x600 and adds the "newBIGIMG" value to to #main-img's src
    $(".zoomThis").attr('href',newBIGLINK);  //Giveing the old THUMB link to the big LINK (So correct image opens on lightbox press)
    $(".thumb-img-" + id).attr('src',oldBIGIMG); //Makeing the old big image to take the thumbs place
    $(".thumb-link-" + id).attr('href',oldBIGLINK); //Makeing the olg big link to take the thumbs link place

});

</script>

如果我将每个变量都硬编码，就像var oldBIGIMG（＆＃34;我输入链接＆＃34;）;它似乎工作得很好。所以我想我错过了什么或做错了什么。

任何可以帮助我正确指导的人都会非常棒。

谢谢！

Answer 1

试试这个可行。

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
          $("ul li").each(function(){
            $(this).click(function(){
               var a=$(this).children("a").attr("href");
               $(".image a img").attr("src",a);
            });
          });
        });
</script>

Answer 2

function LoadIframeSrc(elemID) {
           
			$('.areffer').each(function(){
				
				if(elemID==$(this).attr('id')){
					
					var mainSrc = $('#main-img').closest("img").attr('src');
					
					$('#main-img').closest("img").attr('src',$(this).find('.imager').attr('src'));
					$(this).find('.imager').attr('src', mainSrc);
				}
			});
			
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="gallery" style="max-width: 400px;">

<div class="image" name="myTarget">
<a href="#" title="50 Speeds Of Play - Gray Steel" class="zoomThis" data-lightbox="bilder">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBDs29Z9gJa8eMnmBVK4ziKc3L325HppfJFBEzpHlzBMGKDHu4" class="imager"  title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" id="main-img" width="388" height="388">
</a>
</div>


<ul>
<li id="1" style="float: left;">
<a href="#" onclick="LoadIframeSrc(this.id)"  class="thumb-link-1 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh1">
<img src="http://cdn.filipekberg.se/fekberg-blog/wp-content/uploads/2014/04/VS2013Logo.png" class="thumb-img-1 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a>

</li>

<li id="2" style="float: left;">
<a href="#" onclick="LoadIframeSrc(this.id)" class="thumb-link-2 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh2">
<img src="https://redhoop.com/blog/wp-content/uploads/2013/11/c_sharp.png" class="thumb-img-2 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a>

</li>

<li id="3" style="float: left;">
<a href="#" onclick="LoadIframeSrc(this.id)" class="thumb-link-4 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh3">
<img src="https://university.xamarin.com/images/topic-icons/csharp.png" class="thumb-img-3 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a>

</li>

<li id="4" style="float: left;">
<a href="#" onclick="LoadIframeSrc(this.id)" class="thumb-link-4 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh4" >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiFG_7WJ3lSIX3bZ0VqgOavhox1X5CIRc40BJ34C9r9zscCtzd" class="thumb-img-4 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a>

</li>


</ul>
<div style="clear: both;"></div>


</div>

Rgds：）

Answer 3

function LoadIframeSrc(elemID) {
           
			$('.areffer').each(function(){
				
				if(elemID==$(this).attr('id')){
					
					var mainSrc = $('#main-img').closest("img").attr('src');
					var newSrc = $(this).find('.imager').attr('src');
					
					$('#main-img').closest("img").attr('src',newSrc);
					$(this).find('.imager').attr('src', mainSrc);
					
					$('#main-href').attr('href', newSrc);
					$(this).attr('href',  mainSrc);
					
				}
			});
			
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="gallery" style="max-width: 400px;">

<div class="image" name="myTarget">
<a href="#" title="50 Speeds Of Play - Gray Steel" class="zoomThis" data-lightbox="bilder" id="main-href">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBDs29Z9gJa8eMnmBVK4ziKc3L325HppfJFBEzpHlzBMGKDHu4" class="imager"  title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" id="main-img" width="388" height="388">
</a>
</div>


<ul>
<li id="1" style="float: left;">
<a href="http://cdn.filipekberg.se/fekberg-blog/wp-content/uploads/2014/04/VS2013Logo.png" target="myIfOne" onclick="LoadIframeSrc(this.id)"  class="thumb-link-1 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh1">
<img src="http://cdn.filipekberg.se/fekberg-blog/wp-content/uploads/2014/04/VS2013Logo.png" class="thumb-img-1 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a>

</li>

<li id="2" style="float: left;">
<a href="https://redhoop.com/blog/wp-content/uploads/2013/11/c_sharp.png" target="myIfOne" onclick="LoadIframeSrc(this.id)" class="thumb-link-2 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh2">
<img src="https://redhoop.com/blog/wp-content/uploads/2013/11/c_sharp.png" class="thumb-img-2 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a>

</li>

<li id="3" style="float: left;">
<a href="https://university.xamarin.com/images/topic-icons/csharp.png" target="myIfOne" onclick="LoadIframeSrc(this.id)" class="thumb-link-4 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh3">
<img src="https://university.xamarin.com/images/topic-icons/csharp.png" class="thumb-img-3 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a>

</li>

<li id="4" style="float: left;">
<a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiFG_7WJ3lSIX3bZ0VqgOavhox1X5CIRc40BJ34C9r9zscCtzd" target="myIfOne" onclick="LoadIframeSrc(this.id)" class="thumb-link-4 areffer" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder" id="arefTh4" >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiFG_7WJ3lSIX3bZ0VqgOavhox1X5CIRc40BJ34C9r9zscCtzd" class="thumb-img-4 imager" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74"></a>

</li>


</ul>
<div style="clear: both;"></div>


</div>


<iframe id="ifOne" name="myIfOne" src="" style="display:none">
                
</iframe>

当我将目标设置为我不显示的iframe时，我只能设法获得a-tag上的href。也许其他人有一个更好，更少偷偷摸摸的想法：）

交换img src，ahref src for gallery。 JavaScript的jQuery的//

3 个答案: