图像上的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

回答

相关问题