javascript - 更改切换开关上的网址

Question

jQuery(document).ready(function () {
    jQuery('.custom-switch').click(function(){
        var url = jQuery('.anchr').attr('href');
        var src = jQuery('.anchr').attr('data-source');
        var type = jQuery('.anchr').attr('data-target');
        if(type == 'monthly'){
            jQuery('.anchr').attr('href', src);
            jQuery('.anchr').attr('data-source', url);
            jQuery('.anchr').attr('data-target', 'yearly');
        }else{
            jQuery('.anchr').attr('href', src);
            jQuery('.anchr').attr('data-source', url); 
            jQuery('.anchr').attr('data-target', 'monthly');
        }
    });
});

<div class="switch"><span class="monthly">Billed Monthly</span> <div class="custom-switch" id="undefined"><input class="custom-switch" type="checkbox" id="custom-switch-0"><label for="custom-switch-0"></label></div> <span class="annually">Billed Annually (Save 10%) </span></div>


<ul><li class="plan__price"><a href="https://www.example.com/india/?amt=7499" data-source=https://www.example.com/india/?amt=6749" data-target="monthly" class="anchr btn btn-primary price-btn" target="_blank" rel="noopener"> Pay Now </a></li></ul>

<ul><li class="plan__price"><a href="https://www.example.com/india/?amt=7499" data-source=https://www.example.com/india/?amt=7749" data-target="monthly" class="anchr btn btn-primary price-btn" target="_blank" rel="noopener">Pay Now</a></li></ul>

我使用了两个具有不同网址的立即付款按钮，两个按钮在切换后获得相同的网址。需要不同的网址，如果我再次为第二个按钮编写相同的代码，但效果很好

jQuery(document).ready(function () {
    jQuery('.custom-switch').click(function(){
        var url = jQuery('.anchr').attr('href');
        var src = jQuery('.anchr').attr('data-source');
        var type = jQuery('.anchr').attr('data-target');
        if(type == 'monthly'){
            jQuery('.anchr').attr('href', src);
            jQuery('.anchr').attr('data-source', url);
            jQuery('.anchr').attr('data-target', 'yearly');
        }else{
            jQuery('.anchr').attr('href', src);
            jQuery('.anchr').attr('data-source', url); 
            jQuery('.anchr').attr('data-target', 'monthly');
        }
    });
});

Answer 1

对您的代码进行了一些修复:

• 修复了您的 html，使所有引号都正确。
• 将点击处理程序的选择器更改为 input.custom-switch，因为您的 html 中有多个此类。
• 循环遍历 .anchr 以调整两个按钮。
• 简化了循环内的代码。

jQuery('input.custom-switch').click(function() {
  jQuery('.anchr').each(function() {
    var $this = $(this);
    var url = $this.attr('href');
    var src = $this.attr('data-source');
    var type = $this.attr('data-target') === 'monthly' ? 'yearly' : 'monthly';

    $this.attr('href', src);
    $this.attr('data-source', url);
    $this.attr('data-target', type);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switch">
  <span class="monthly">Billed Monthly</span>
  <div class="custom-switch" id="undefined">
    <input class="custom-switch" type="checkbox" id="custom-switch-0">
    <label for="custom-switch-0"></label>
  </div>
  <span class="annually">Billed Annually (Save 10%) </span>
</div>

<ul>
  <li class="plan__price">
    <a href="https://www.example.com/india/?amt=7499" data-source="https://www.example.com/india/?amt=6749" data-target="monthly " class="anchr btn btn-primary price-btn " target="_blank " rel="noopener "> Pay Now </a>
  </li>
</ul>

<ul>
  <li class="plan__price ">
    <a href="https://www.example.com/india/?amt=7499 " data-source="https://www.example.com/india/?amt=7749" data-target="monthly" class="anchr btn btn-primary price-btn" target="_blank" rel="noopener">Pay Now</a>
  </li>
</ul>