jQuery 代码在放在 if 语句上时未运行

Question

我正在尝试执行jQuery脚本，以根据单击/选择的单选按钮来更改data-url属性。

但是当我将代码放在 if 语句中以检查哪个单选按钮处于活动状态时，我的代码将不起作用。它将成功替换数据网址属性，尽管在没有 if 语句的情况下执行。

$('input[name="radio1"]').on('change', function() {
if ($(this).val() == 'yearly') {
var a = $('#samcart').data('url');
$('#samcart').attr("data-url", "www.urlhere.com");
} else if ($(this).val() == 'quarterly') {
var a = $('#samcart').data('url');
$('#samcart').attr("data-url", "www.url2here.com");
} else {
var a = $('#samcart').data('url');
$('#samcart').attr("data-url", "www.url3here.com");
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="samcart" class='samcart-popup-container' style='margin:auto;width:200px;align:center;' data-id='123' data-url='empty'>
<div class='samcart-popup-button' type='button' class='btn btn-default css3button'>
Join
</div>

Answer 1

已编辑看起来你的代码很好，我没有实质性的改变，请参阅下面的jsfille：

https://jsfiddle.net/7tL6dfft/16/

.HTML

<form action='#' method='get'>
<input type="radio" name="radio1" id="yearly" value="yearly"><label class="yearly-label four col" for="yearly">I have some text here</label>
<input type="radio" name="radio1" id="quarterly" value="quarterly"><label class="yearly-label four col" for="yearly">quarterly</label>
<input type="radio" name="radio1" id="weekly" value="weekly"><label class="yearly-label four col" for="yearly">weekly</label>
</form>
<a id="samcart" href='#' data-url='http://exmaple.com'>sam cart url</a>

.JS

$(function(){
console.log("start");
$('input[type=radio][name=radio1]').on('change', function() {
console.log("event",$(this).val());
if ($(this).val() == 'yearly') {
$('#samcart').data("url", "www.urlhere.com");
$('#samcart').html("www.urlhere.com");
var a = $('#samcart').data('url');
} else if ($(this).val() == 'quarterly') {
$('#samcart').data("url", "www.url2here.com");
$('#samcart').html("www.url2here.com");
var a = $('#samcart').data('url');
} else {
$('#samcart').data("url", "www.url3here.com");
$('#samcart').html("www.url3here.com");
var a = $('#samcart').data('url');
}
alert("new data-url: "+a);
});
})

可能是你被误导了

• 您的调试，您在更改值之前采用"var a"
• 您的浏览器，有时开发者工具不会显示 attr 的变化
• js 的位置，你在加载链中的代码之前设置 JS，参见$(function(({}(