动态jQuery内容加载
动态jQuery内容加载
提问于 2014-07-17 09:17:35
我将工作人员添加到我的CMS中，但是加载成员时遇到了问题，因为我认为我的代码非常混乱。是否有可能删除"li a.Jobs-desc“和"li a.job-desc 1”等，并有一个对所有工作人员都有效的全局变量。一旦点击每个工作人员，他们自己的描述应该打开，而其他成员应该关闭。
小提琴：http://jsfiddle.net/zangief007/BSN5u/14/
HTML：
<ul>
<li><a href="#" class="job-desc1"><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"></a></li>
<li>Jon doe</li>
<li>09 548 5554</li>
<li>jon@gmail.com</li>
</ul>
<p class="description1">Joe Doe dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>
<ul>
<li><a href="#" class="job-desc2"><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"></a></li>
<li>Jenny Hill</li>
<li>09 548 5554</li>
<li>jon@gmail.com</li>
</ul>
<p class="description2">Jenny Hill dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>
<ul>
<li><a href="#" class="job-desc3"><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"></a></li>
<li>Peter Small</li>
<li>09 548 5554</li>
<li>jon@gmail.com</li>
</ul>
<p class="description3">Peter Small dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>
</div>联署材料：
$( "li a.job-desc" ).click(function() {
$( "p.description" ).fadeToggle( "slow", "linear" );
});
$( "li a.job-desc1" ).click(function() {
$( "p.description1" ).fadeToggle( "slow", "linear" );
});
$( "li a.job-desc2" ).click(function() {
$( "p.description2" ).fadeToggle( "slow", "linear" );
});
</script>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-07-17 09:25:49
CSS类用于对一组元素进行分组。为每个元素添加class1、class2等类是没有意义的。
(对于访问特定元素，您可以使用id，这比使用class访问它要快得多)
在本例中，您可以为<a>提供一个公共类<a>，为<p>提供一个description类，然后可以使用下面的脚本来显示各自的描述。
$("li a.job-desc").click(function () {
$(this).closest('ul').next("p.description").fadeToggle("slow", "linear");
});如果要关闭其他描述，可以按以下方式使用*可见选择器：
$("li a.job-desc").click(function () {
var $desc = $(this).closest("ul").next("p.description").fadeToggle("slow", "linear");
$('p.description:visible').not($desc).hide();
});Stack Overflow用户
发布于 2014-07-17 09:24:18
使用每个迭代器
$("li a").each(function(index,ele){
$(this).click (function(){
$(this).closest("ul").next("p.description").fadeToggle( "slow", "linear" );
});
});Stack Overflow用户
发布于 2014-07-17 09:25:06
当链接和描述不包含在单独的容器中时，它会变得有点混乱，但是这应该会在关联的描述中淡出，并淡出所有其他的描述。
$("li a.job-desc").click(function() {
// first find the description associated with the clicked link
var description = $(this).closest("ul").nextAll("p.description").first();
description.siblings("p.description").fadeOut();
description.fadeIn();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24799480
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号