Question

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

但是当我把它放在if语句中以检查哪个单选按钮处于活动状态时，我的代码无法正常工作。虽然在没有if语句的情况下执行，但它将成功替换data-url属性。

＆＃13;

$('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");
  }
});

＆＃13;

<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>

＆＃13;

Answer 1

<强> EDITED 看起来你的代码很好，我没有实质性的改变，请参阅下面的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”
您的浏览器，有时候开发者工具不会显示更改attrs
js的位置，你在加载链中的代码之前设置你的JS，参见 $（function（）{}）

把它放在if语句上时jQuery代码没有运行

1 个答案: