[英]JQuery reveal div on click and hover of text link - a more elegant solution?
[英]jQuery on image click reveal text desc in div
我创建了一个页面,该页面在页面右侧列出了一组大拇指。 单击拇指时,相关图像显示在其左侧的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"> </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编码以来已经有一段时间了,所以如果在任何批评的地方看起来都很粗糙。
谢谢克里斯
解决了一些方法并进行了调整。 这是我更改的代码部分。
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。 你炒了我的大脑。
仅使用一个事件处理程序,并在单击的链接本身内找到描述:
$("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;
});
两件事情:
以下是您想要的:
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();
});
接受了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;
});
效果很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.