Javascript 用于更改价格和订单链接的JQUERY切换

Javascript 用于更改价格和订单链接的JQUERY切换,javascript,jquery,toggle,slidetoggle,Javascript,Jquery,Toggle,Slidetoggle,我尝试做以下,通过使用以下查询更改显示价格和订单的直接链接 function changepricing() { jQuery("#monthly").slideToggle(); jQuery("#monthly1").slideToggle(); jQuery("#montly2").slideToggle(); jQuery("#monthly3").slideToggle(); jQuery("#monthly4").slideToggle();

我尝试做以下,通过使用以下查询更改显示价格和订单的直接链接

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>
    
  • &euro;1/1个月
  • &euro;2/6个月
  • &欧元;3/1年
  • &欧元;4/2年
  • 如果我只使用2个产品,但使用3或4个产品不起作用,则上述代码可以正常工作。有人能帮忙吗?我真的很感激

    谢谢, 曼纽尔

    我是否可以建议在可切换项上添加另一个类(例如
  • ),并改用此JS代码:

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

    如果你对每种产品都有一套这样的div,那么我真的很想知道2个prod的效果如何?正如Mikael Härsjö所说,在处理项目列表时,使用类而不是ID。您不能有多个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();
      }
    }
    
    函数更改定价(\u从,\u到){
    
    对于(i=0;iYou必须缩进javascript代码,以便我们尝试理解它)您的changepricing方法有点让我头疼,但您可以通过选择via类来清除它。类似于$(“.pricing_header2”)。slideToggle();您好,pricing_header来自CSS表单,而不是jquery。jquery的代码是:e.g id=“monthly1”。相同的代码适用于两种产品,但不适用于4。有什么想法吗?谢谢,正如我在上面提到的,id是变更类“pricing_header2”是CSS中表格的样式。我假装是:这里是:两个产品。在这里工作有四个产品。非常感谢。嗨,你能给我一个我需要为这项工作添加的代码的工作示例吗?非常感谢allHi,我已经全部更改为类的使用,但仍然不工作,请看这里:不是更改价格显示,而是隐藏一个月和一个月现在是半年、一年和两年。会出什么问题呢?很多感谢这种设计可能会出问题,但我设法从答案中总结出函数。看看上面修改过的答案。
    <li id="monthly" class="pricing_header2" style="display: block;">
      <a onclick="changepricing('monthly', 'halfyear');return false;" href="#">
        <span>1 Month </span>
      </a>
    </li>