我是 JavaScript 新手,需要一些帮助/想法。
我有一个 HTML anchor 标记,我想根据复选框的选择更改/附加其属性。
未选中任何复选框的 anchor 标记:
<a href="javascript:void(0)" data-cb-type="checkout" data-cb-plan-id=“SamplePlan” >Enrol</a>
选中一个复选框的 anchor 标记:
<a href="javascript:void(0)" data-cb-type="checkout" data-cb-plan-id="SamplePlan" data-cb-addons_id_0=“CheckBox1”>Enrol</a>
同样,如果用户选择其他复选框属性以附加到 anchor 标记中。
我现在在哪里:
目前,我可以使用以下 JQuery 代码更改 anchor 标记类。但无法更改/附加属性。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.red {color: red;}
</style>
</head>
<body>
<input type="checkbox" id="test" value="supress">
<label for="dna_headline_optin_supress">Check me out</label>
<div>
<p class="changeme">Look at me change color</p>
<p>Look at me change color - NOT</p>
<p class="changeme">Look at me change color</p>
</div>
<script type="text/javascript">
$('#test').change(function(){
if($(this).is(":checked")) {
$('.changeme').addClass('red');
} else {
$('.changeme').removeClass('red');
}
});
</script>
</body>
</html>
最佳答案
attr() 和removeAttr() 是用于添加和删除属性的方法。
https://api.jquery.com/removeAttr/#removeAttr-attributeName
https://api.jquery.com/attr/#attr2
所以你应该将代码编辑为:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.red {color: red;}
</style>
</head>
<body>
<input type="checkbox" id="test" value="supress">
<label for="dna_headline_optin_supress">Check me out</label>
<div>
<p class="changeme">Look at me change color</p>
<p>Look at me change color - NOT</p>
<p class="changeme">Look at me change color</p>
</div>
<script type="text/javascript">
$('#test').change(function(){
if($(this).is(":checked")) {
$('.changeme')
.addClass('red')
.attr('rel', '2345');
} else {
$('.changeme')
.removeClass('red')
.removeAttr('rel');
}
});
</script>
</body>
</html>
关于javascript - 使用基于复选框的 javascript 更改/附加 html <a> 标签属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53500389/