將img src和ahref src交換為圖庫。 Javascript // jQuery

Question

我在掙扎。

這是給網上商店的。 我有一個“大圖像”和一些拇指圖像。 當我點擊大圖片時，我想與其他圖片一起打開燈箱圖庫。

我還想做的是，當我按下拇指圖像時，我想交換位置並與大圖像鏈接。 這樣被按下的拇指成為大圖像，而大圖像成為拇指圖像。

我已經嘗試了幾個小時，但似乎無法正常工作。

這是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（“ I type the link”）; 看起來還不錯。 所以我想我正在丟失某些東西或做錯了什么。

任何可以幫助我朝正確方向發展的人都將非常棒。

謝謝！

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時，我只能設法在href標簽上獲得href。.也許其他人有更好，更輕松的主意:)