Question

基本上，我有无限数量的带有动态ID的容器和一个用于加载每个容器内容的动态菜单。我用静态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>

如果你能指出我正确的方向，非常感谢，谢谢你。

Answer 1

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

我想指出，解决方案并不需要2个月，只需2个月就可以在此处发布。

打击这个;

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

我用过这个;

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

首先它隐藏所有id以pf_开头然后它只显示第一个匹配以_1

结尾的id

打击这个;

$('#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();
    }
});

希望这有助于其他人

Jquery从动态id切换div hide / show

1 个答案: