JQuery的切换div隐藏/显示动态ID的

-1

我有，实质上，无限数量的容器与动态ID和动态菜单加载每个容器的内容。我已经完成了静态身份证（但仍然看起来如此繁重），但不知道去哪里使用动态。JQuery的切换div隐藏/显示动态ID的

当单击导航链接（从.img_select）时，它会显示相应的div并隐藏组中的所有其他链接。它还更新菜单项的类别，以便单击的项目被选中，剩下的项目将被取消选中。

<div id="pf1_1"> 
     My content for pf1_1 container goes here 
</div> 
<div id="pf1_2"> 
     My content for pf1_2 container goes here 
</div> 
<!-- This could have a dozen+ or more divs, or only 1 //--> 
<p class="img_select"><span class="pf_current" id="pfc1_1"><a href="#">1-1</a></span> <span class="pf_next" id="pfc1_2"><a href="#">1-2</a></span></p> 
<div id="pf2_1"> 
     My content for pf2_1 container goes here 
</div> 
<div id="pf2_2"> 
     My content for pf2_2 container goes here 
</div> 
<div id="pf2_3"> 
     My content for pf2_3 container goes here 
</div> 
<!-- This could have a dozen+ or more divs or only 1 //--> 
<p class="img_select"><span class="pf_current" id="pfc2_1"><a href="#">2-1</a></span> <span class="pf_next" id="pfc2_2"><a href="#">2-2</a></span> <span class="pf_next" id="pfc2_3"><a href="#">2-3</a></span></p>

jQuery的，我想动态创建与此类似

<script> 
$(document).ready(function(){ 
    $("#pf1_2").hide(); 
    $("#pf2_2").hide(); 
    $("#pf2_3").hide(); 

    $('#pfc1_1').click(function(){ 
    $("#pf1_2").hide('fast'); 
    $("#pf1_1").show('fast'); 
    $("#pfc1_1").removeClass("pf_next").addClass("pf_current"); 
    $("#pfc1_2").removeClass("pf_current").addClass("pf_next"); 
    }); 
    $('#pfc1_2').click(function(){ 
    $("#pf1_1").hide('fast'); 
    $("#pf1_2").show('fast'); 
    $("#pfc1_2").removeClass("pf_next").addClass("pf_current"); 
    $("#pfc1_1").removeClass("pf_current").addClass("pf_next"); 
    }); 
    $('#pfc2_1').click(function(){ 
    $("#pf2_2").hide('fast'); 
    $("#pf2_3").hide('fast'); 
    $("#pf2_1").show('fast'); 
    $("#pfc2_1").removeClass("pf_next").addClass("pf_current"); 
    $("#pfc2_2").removeClass("pf_current").addClass("pf_next"); 
    $("#pfc2_3").removeClass("pf_current").addClass("pf_next"); 
    }); 
    $('#pfc2_2').click(function(){ 
    $("#pf2_1").hide('fast'); 
    $("#pf2_3").hide('fast'); 
    $("#pf2_2").show('fast'); 
    $("#pfc2_2").removeClass("pf_next").addClass("pf_current"); 
    $("#pfc2_1").removeClass("pf_current").addClass("pf_next"); 
    $("#pfc2_3").removeClass("pf_current").addClass("pf_next"); 
    }); 
    $('#pfc2_3').click(function(){ 
    $("#pf2_2").hide('fast'); 
    $("#pf2_1").hide('fast'); 
    $("#pf2_3").show('fast'); 
    $("#pfc2_3").removeClass("pf_next").addClass("pf_current"); 
    $("#pfc2_2").removeClass("pf_current").addClass("pf_next"); 
    $("#pfc2_1").removeClass("pf_current").addClass("pf_next"); 
    }); 
}); 
</script>

的东西，如果你可以点我在正确的方向，非常感谢，谢谢。

来源

2011-11-23 adam

[你需要阅读本（http://en.wikipedia.org/wiki/Control_flow#Loops）。 – Incognito

看到我发现了一种方式，不是说是正确的方式，但它的工作原理，我想与你分享。

我想指出，它不需要2个月的时间来排序解决方案，只需2个月就可以发布。

为了解决这个问题;

$("#pf1_2").hide(); 
$("#pf2_2").hide(); 
$("#pf2_3").hide();

我用过这个;

$("div[id^=pf_]").hide(); 
$("div[id$=_1]").show();

首先它隐藏了所有的ID开始PF_ 那么它只能显示第一通过匹配的ID在_1

为了解决这个问题结束;

$('#pfc1_1').click(function(){ 
$("#pf1_2").hide('fast'); 
$("#pf1_1").show('fast'); 
$("#pfc1_1").removeClass("pf_next").addClass("pf_current"); 
$("#pfc1_2").removeClass("pf_current").addClass("pf_next"); 
}); 
// etc.....

我用这个;

$('span[id^=pfc_]').live("click", function(e) { 
    e.preventDefault(); 
    var id = $(this).attr('id').split('_'); 

    var classname = $(this).attr('class'); 
    var navwidth = $("div[id^=pf_"+id[1]+"_"+id[2]+"]").width(); 
    if(classname != 'pf_current'){ 
     $("span[id^=pfc_"+id[1]+"_]").removeClass("pf_current").addClass("pf_next"); 
     $("span[id^=pfc_"+id[1]+"_"+id[2]+"]").removeClass("pf_next").addClass("pf_current"); 
     // change portfolio item 
     $("div[id^=pf_"+id[1]+"_]").hide(); 
     $("div[id^=pf_"+id[1]+"_"+id[2]+"]").delay('5').show(); 
    } 
});

希望这有助于别人

来源

2012-02-16 07:40:28 adam

JQuery的切换div隐藏/显示动态ID的

回答

相关问题