jquery - 根据选择值显示/隐藏按钮

Question

在我的 Shopify 商店中，我有一个 for 循环，它将显示页面上的每个产品。对于每个产品，在底部，我有一个选择，它将确定每个产品的计费频率。目前有 3 种产品，如果重要的话:

<select id="ma" class="single-option-selector" name="frequency">
    <option value="">Monthly</option>
    <option value="annual">Annual - 1 Month Free</option>
</select>

然后我想根据所选选项(每月或每年)显示“继续”按钮

<a href="{{ product.url | within: collection }}" class="monthly-btn btn">
    <span id="AddToCartText">Select Plan</span>
</a>

<a href="{{ product.url | within: collection | append: '-annual' }}" class="annual-btn btn">
    <span id="AddToCartText">Select Plan</span>
</a>

我正在寻找正确的脚本，该脚本将根据当前选择的选项隐藏和显示按钮。这是我现在没有做任何事情的内容(我已经通过在其中添加警报来确认 - 更改值时我没有收到任何警报弹出窗口)

<script>
  $(document).ready( function () {
    $('.annual-btn').each( function() {
      $(this).hide();
    });
  });

$('#ma').each( function() { 
  $(this).change( function () {
    var valx = $(this).val()
    if (valx == 'annual') {
      $('.monthly-btn').hide();
      $('.annual-btn').show();
      alert('test');
    } else {
      $('.monthly-btn').show();
      $('.annual-btn').hide();
      alert('test2');
    }
  });
});
</script>

此外，我还尝试了向函数添加 .each()、.change() 以及直接从 select 调用该函数的所有可能组合(因此使用 onchange="changeFunction(); “)。谁能帮帮我吗？

Answer 1

您不需要使用“each()”函数。此外，添加到 DOM 元素的任何事件监听器都应该包装在

中

$(document).ready(function(){ ... code goes here ...});

或其快捷方式:

$(function(){ ... code goes here ...});

否则添加事件监听器时该元素可能不存在。

就我个人而言，我会使用 css 来隐藏 Annual-btn

.annual-btn { display: none; }

那么你的 JavaScript 就会像这样:

$(function(){
    $('#ma').change(function(){
       var opt = $(this).val();
        if(opt == 'annual'){
            $('.monthly-btn').hide();
            $('.annual-btn').show();
        }else{
            $('.monthly-btn').show();
            $('.annual-btn').hide();
        }
    });
});

这是一个工作 fiddle :http://jsfiddle.net/qyb83hxv/1/