圖像上的jQuery點擊揭示div中的文字desc

我已經創建了一個頁面，該頁面在頁面右側的大拇指上列出了一個組。當點擊一個拇指時，相關圖像將顯示在其左側的div中。現在我試圖展示與所述圖像匹配的圖像描述。到目前爲止，我的工作如下;圖像上的jQuery點擊揭示div中的文字desc

的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編碼，所以如果它看起來粗糙任何地方的批評是受歡迎的。

謝謝，克里斯

來源

2011-01-06 cdtd

通過去了一些方法和調整遠解決它。以下是我更改的代碼部分。

的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。你已經炸掉了我的大腦。

來源

2011-01-06 19:59:13 cdtd

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

$("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; 
});

來源

2011-01-06 20:02:20

你可以運行我// //查找說明部分。幾個月沒有看到這些東西后，我生鏽了。它是否需要創建一個新的html文件來保存描述，或者他們都將保持與當前的HTML？ – cdtd 2011-01-06 20:10:34

兩件事情：

調用點擊第二次刪除第一個點擊行爲。
你把空的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(); 
});

來源

2011-01-06 20:16:06

採納了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;  
    });

它很好用。

來源

2011-01-06 20:32:12 cdtd

圖像上的jQuery點擊揭示div中的文字desc

回答

相關問題