jQuery在圖像單擊上顯示div中的文本描述

Question

我創建了一個頁面，該頁面在頁面右側列出了一組大拇指。 單擊拇指時，相關圖像顯示在其左側的div中。 現在，我試圖顯示與所述圖像匹配的圖像描述。 到目前為止，我的工作如下：

jQuery的//

<!-- Swap portfolio image on click -->
$("ul.thumbs li a").click(function() { 
var mainImage = $(this).attr("href"); //Find Image Name
$(".work_two_third_column_copy img").attr({ src: mainImage });
return false;  
});

<!-- Get image description on click -->
$("ul.thumbs li a").click(function () {
var tip = $(this).css("visibility:visible");
$(".one_sixth_column_copy .work_info").html("");
});

HTML //

<div class="work_two_third_column_copy">
<a href=""><img src="main_image1.gif"></a>
</div><!-- End .work_two_third_column_copy -->


<div class="one_third_column_right">

<div class="one_sixth_column">
<div class="one_sixth_column_copy">
<div class="work_info">&nbsp;</div><!-- End Image Information -->
</div><!-- End .one_sixth_column_copy -->
</div><!-- End .one_sixth_column -->

<div class="one_sixth_column_thumbs">
<ul class="thumbs">
<li><a href="main_image1.gif"><img src="1.gif"><span class="tip">number one desc</span></a></li>
<li><a href="main_image2.gif"><img src="2.gif"><span class="tip">number two desc</span></a></li>
<li><a href="main_image3.gif"><img src="4.gif"><span class="tip">number three desc</span></a></li>
<li><a href="main_image4.gif"><img src="5.gif"><span class="tip">number four desc</span></a></li>
</ul><!-- ul.thumbs -->
</div><!-- End .one_sixth_column_thumbs -->

</div><!--End .one_third_column_right -->

到目前為止，當我單擊拇指時，圖像顯示良好，因此我認為我可以使用相同的原理來獲得相似的效果。 我將拇指設置為固定寬度，因此跨度不會顯示在頁面上，但是我仍然使跨度可見性：隱藏； 只是要確定。

有什么建議，自從我用jQuery編碼以來已經有一段時間了，所以如果在任何批評的地方看起來都很粗糙。

謝謝克里斯

Answer 1

解決了一些方法並進行了調整。 這是我更改的代碼部分。

jQuery的//

<!-- Swap portfolio information on click -->
    $(function() {
      $("ul.thumbs li a").click(function() {
        $(".work_info p").text($(this).next().text());
        return false;
      });
    });

HTML //

<li><a href="main_image1.gif"><img src="1.gif"></a><p>number one text</p></li>
<li><a href="main_image2.gif"><img src="2.gif"></a><p>number two text</p></li>

我在這里找到了類似問題的這篇文章，但起初無法使其正常工作。 非常感謝Adam和Nick Craver。 你炒了我的大腦。

Answer 2

僅使用一個事件處理程序，並在單擊的鏈接本身內找到描述：

$("ul.thumbs li a").click(function() { 
    var mainImage = $(this).attr("href"); //Find Image Name

    //Set image:
    $(".work_two_third_column_copy img").attr({ src: mainImage });

    //Find description:
    var oDescSpan = $(this).find(".tip");
    if (oDescSpan.length == 1)
        $(".one_sixth_column_copy .work_info").html(oDescSpan.html());
    else
        $(".one_sixth_column_copy .work_info").html("");

    return false;  
});

Answer 3

兩件事情：

1. 第二次調用單擊將刪除第一次單擊行為。
2. 您正在將空HTML放在.work_info中

以下是您想要的：

var clickerSetup = function() {
    $("ul.thumbs li a").click(function() {
        var mainImage = $(this).attr("href"); //Find Image Name
        $(".work_two_third_column_copy img").attr({ src: mainImage });
        var tip = $(this).css("visibility:visible");
        $(".one_sixth_column_copy .work_info").html($(this).text());

        return false
    }); 
};
$(document).ready(function() {
    clickerSetup();
});

Answer 4

接受了user344215的指示，即行為將被取消，因此這里是一個更簡潔的版本：

<!-- Swap portfolio image and desc on click -->
    $("ul.thumbs li a").click(function() {  
        var mainImage = $(this).attr("href"); //Find Image Name
        $(".work_two_third_column_copy img").attr({ src: mainImage });
        $(".work_info p").text($(this).next().text());
        return false;       
    });

效果很好。