Переключатель JQUERY для изменения цены и ссылки заказа

Question

Я попробую сделать следующее, с помощью следующего запроса измените отображаемые цены и прямую ссылку для заказа.

function changepricing() {
    jQuery("#monthly").slideToggle();
    jQuery("#monthly1").slideToggle();
    jQuery("#montly2").slideToggle();
    jQuery("#monthly3").slideToggle();
    jQuery("#monthly4").slideToggle();
    jQuery("#halfyear").slideToggle();
    jQuery("#halfyear1").slideToggle();
    jQuery("#halfyear2").slideToggle();
    jQuery("#halfyear3").slideToggle();
    jQuery("#halfyear4").slideToggle();
    jQuery("#annual").slideToggle();
    jQuery("#annual1").slideToggle();
    jQuery("#annual2").slideToggle();
    jQuery("#annual3").slideToggle();
    jQuery("#annual4").slideToggle();
    jQuery("#biannual").slideToggle();
    jQuery("#biannual1").slideToggle();
    jQuery("#biannual2").slideToggle();
    jQuery("#biannual3").slideToggle();
    jQuery("#biannual4").slideToggle();
    jQuery("#prcmonthly1").slideToggle();
    jQuery("#prcmonthly2").slideToggle();
    jQuery("#prcmonthly3").slideToggle();
    jQuery("#prcmonthly4").slideToggle();
    jQuery("#prchalfyear1").slideToggle();
    jQuery("#prchalfyear2").slideToggle();
    jQuery("#prchalfyear3").slideToggle();
    jQuery("#prchalfyear4").slideToggle();
    jQuery("#prcannual1").slideToggle();
    jQuery("#prcannual2").slideToggle();
    jQuery("#prcannual3").slideToggle();
    jQuery("#prcannual4").slideToggle();
    jQuery("#prcbiannual1").slideToggle();
    jQuery("#prcbiannual2").slideToggle();
    jQuery("#prcbiannual3").slideToggle();
    jQuery("#prcbiannual4").slideToggle();
}   

Это код

Для отображения и изменения цен:

    <li id="monthly" class="pricing_header2" style="display:block;"><a href="#" onclick="changepricing();return false;"><span>1 Month </span></a></li>
    <li id="halfyear" class="pricing_header2" style="display:none;"><a href="#" onclick="changepricing();return false;"><span>6 Months </span></a></li>
    <li id="annual" class="pricing_header2" style="display:none;"><a href="#" onclick="changepricing();return false;"><span>{$LANG.product_choose_one} </span></a></li>
    <li id="biannual" class="pricing_header2" style="display:none;"><a href="#" onclick="changepricing();return false;"><span>{$LANG.product_choose_two} </span></a></li>

Для отображения цен и ссылок для заказа:

        <li id="monthly1" class="pricing_header2" style="display:block;">&euro;1 <span>/1 mo.</span></li>
        <li id="halfyear1" class="pricing_header2" style="display:none;">&euro;2 <span>/6 mos.</span></li>
        <li id="annual1" class="pricing_header2" style="display:none;">&euro;3 <span>/One yr.</span></li>
        <li id="biannual1" class="pricing_header2" style="display:none;">&euro;4 <span>/Two yrs.</span></li>

        <li id="prcmonthly1" class="pricing_footer" style="display:block;"><span><a href="link1" class="pricing_button">{$LANG.product_buy_now}</a></li>
        <li id="prchalfyear1" class="pricing_footer" style="display:none;"><span><a href="link2" class="pricing_button">{$LANG.product_buy_now}</a></li>
        <li id="prcannual1" class="pricing_footer" style="display:none;"><span><a href="link3" class="pricing_button">{$LANG.product_buy_now}</a></li>
        <li id="prcbiannual1" class="pricing_footer" style="display:none;"><span><a href="link4" class="pricing_button">{$LANG.product_buy_now}</a></li>

Вышеприведенный код работает нормально, если я использую только для 2 продуктов, но использование 3 или 4 продуктов не работает.Может ли кто-нибудь помочь?Я действительно ценю.

Спасибо, Мануэль

Answer 1

Если у вас есть набор этих элементов для каждого продукта, то я действительно хочу узнать, как это работает для 2 продуктов? В любом случае, как сказал Микаэль Хярсё, используйте классы вместо идентификаторов при работе со списками элементов. У вас не может быть больше одного div id = "foo", но вы можете иметь неограниченное число div class = "foo".

Итак, мне удалось очистить эту функцию:

function changepricing(_from, _to) {
  for(i=0; i<=4; i++) {
    if(i == 0) {
      nr = '';
    }
    else {
      nr = i;
    }
    jQuery("#"+_from+nr).slideToggle();
    jQuery("#"+_to+nr).slideToggle();
  }
}

Для того, чтобы он заработал, вам нужно сделать звонок следующим образом:

<li id="monthly" class="pricing_header2" style="display: block;">
  <a onclick="changepricing('monthly', 'halfyear');return false;" href="#">
    <span>1 Month </span>
  </a>
</li>

Answer 2

Ого!

Могу ли я предложить еще один класс для элементов с возможностью переключения (например, <li class='pricing_header2 toggleable'>) и использовать вместо этого этот код JS:

 $('.toggleable').slideToggle();