Jquery переключение div скрыть / показать из динамических идентификаторов

Question

У меня неограниченное количество контейнеров с динамическими идентификаторами и динамическое меню для загрузки содержимого каждого контейнера.Я сделал это со статическими идентификаторами (но все еще кажется таким интенсивным использованием), но не знаю, куда идти, чтобы использовать динамические.

Когда нажата навигационная ссылка (из .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();

сначала он скрывает все идентификаторы, начинающиеся с pf_ затем он показывает только первое, сопоставляя идентификатор, заканчивающийся на _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();
    }
});

Надеюсь, это поможет кому-то еще