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的

回答

相關問題