在我的Shopify商店中,我有一个for循环,它将显示页面上的每个产品。对于每个产品,在底部,我有一个select
,它将确定每个产品的结算频率。目前有3种产品,如果重要的话:
<select id="ma" class="single-option-selector" name="frequency">
<option value="">Monthly</option>
<option value="annual">Annual - 1 Month Free</option>
</select>
然后我继续&#39;我想根据所选选项(每月或每年)显示的按钮
<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();"
)。任何人都可以帮助我吗?
答案 0 :(得分:5)
您不需要使用&#39; each()&#39;功能。此外,添加到DOM元素的任何事件侦听器都应包含在
中$(document).ready(function(){ ... code goes here ...});
或其快捷方式:
$(function(){ ... code goes here ...});
否则,添加事件侦听器时,该元素可能不存在。
我个人用css来隐藏年度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();
}
});
});
这是一个工作小提琴:http://jsfiddle.net/qyb83hxv/1/
答案 1 :(得分:0)
添加更改功能以选择
<select id="ma" onchange="somefunction()" class="single-option-selector" name="frequency">
<option value="monthly">Monthly</option>
<option value="annual">Annual - 1 Month Free</option>
</select>
<script>
somefunction(){
if($("#ma").val() === "monthly"){
$(".monthly-btn").show();
$(".annual-btn").hide();
}else{
$(".monthly-btn").hide();
$(".annual-btn").show();
}
}
</script>