从循环内部获取Jquery Toogle按钮值
从循环内部获取Jquery Toogle按钮值
提问于 2020-06-05 00:27:11
我试着在一个php循环中保持3个切换按钮，属性名称用动态值填充。
通过使用Jquery onclick事件，我希望捕获title属性。By code如下所示：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" />
<style>
.switch-toggle {
width: 10em;
}
.switch-toggle label:not(.disabled) {
cursor: pointer;
}
</style>
</head>
<body>
<?php for($i=0;$i<3;$i++){ ?>
<div class="switch-toggle switch-3 switch-candy">
<input id="on" name="state-d" type="radio" checked="" title="A-101-<?php echo $i; ?>">
<label for="on" onclick="">ON</label>
<input id="na" name="state-d" type="radio" disabled checked="checked">
<label for="na" onclick="">N/A</label>
<input id="off" name="state-d" type="radio" title="A-202-<?php echo $i; ?>">
<label for="off" onclick="">OFF</label>
<a></a>
</div>
<p></p>
<?php } ?>
</body>
<script>
$(function() {
$(".switch-candy input[type='radio']").click(function(){
var title = $(this).attr('title');
alert(title);
});
});
</script>
</html>每当我点击任何按钮时，我只能得到第一个按钮属性。我无法获得第二个和第三个切换按钮的属性。
我们非常感谢您的任何建议。
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-05 00:53:09
你的按钮上有重复的id和name属性，这会使你的超文本标记语言无效，javascript会把它们当作一个单选按钮，所以你必须添加当前的for循环计数器，以使id属性动态化，并防止重复。
这是有效的HTML版本：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" />
<style>
.switch-toggle {
width: 10em;
}
.switch-toggle label:not(.disabled) {
cursor: pointer;
}
</style>
</head>
<body>
<div class="switch-toggle switch-3 switch-candy">
<input id="on-0" name="state-d-0" type="radio" checked="" title="A-101-0">
<label for="on-0" onclick="">ON</label>
<input id="na-0" name="state-d-0" type="radio" disabled checked="checked">
<label for="na-0" onclick="">N/A</label>
<input id="off-0" name="state-d-0" type="radio" title="A-202-0">
<label for="off-0" onclick="">OFF</label>
<a></a>
</div>
<p></p>
<div class="switch-toggle switch-3 switch-candy">
<input id="on-1" name="state-d-1" type="radio" checked="" title="A-101-1">
<label for="on-1" onclick="">ON</label>
<input id="na-1" name="state-d-1" type="radio" disabled checked="checked">
<label for="na-1" onclick="">N/A</label>
<input id="off-1" name="state-d-1" type="radio" title="A-202-1">
<label for="off-1" onclick="">OFF</label>
<a></a>
</div>
<p></p>
<div class="switch-toggle switch-3 switch-candy">
<input id="on-2" name="state-d-2" type="radio" checked="" title="A-101-2">
<label for="on-2" onclick="">ON</label>
<input id="na-2" name="state-d-2" type="radio" disabled checked="checked">
<label for="na-2" onclick="">N/A</label>
<input id="off-2" name="state-d-2" type="radio" title="A-202-2">
<label for="off-2" onclick="">OFF</label>
<a></a>
</div>
<p></p>
</body>
<script>
$(function() {
$(".switch-candy input[type='radio']").click(function(){
var title = $(this).attr('title');
alert(title);
});
});
</script>
</html>
对于PHP代码，应该是这样的：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" />
<style>
.switch-toggle {
width: 10em;
}
.switch-toggle label:not(.disabled) {
cursor: pointer;
}
</style>
</head>
<body>
<?php for($i=0;$i<3;$i++): ?>
<div class="switch-toggle switch-3 switch-candy">
<input id="on-<?php echo $i; ?>" name="state-d-<?php echo $i; ?>" type="radio" checked="" title="A-101-<?php echo $i; ?>">
<label for="on-<?php echo $i; ?>" onclick="">ON</label>
<input id="na-<?php echo $i; ?>" name="state-d-<?php echo $i; ?>" type="radio" disabled checked="checked">
<label for="na-<?php echo $i; ?>" onclick="">N/A</label>
<input id="off-<?php echo $i; ?>" name="state-d-<?php echo $i; ?>" type="radio" title="A-202-<?php echo $i; ?>">
<label for="off-<?php echo $i; ?>" onclick="">OFF</label>
<a></a>
</div>
<p></p>
<?php endfor; ?>
</body>
<script>
$(function() {
$(".switch-candy input[type='radio']").click(function(){
var title = $(this).attr('title');
alert(title);
});
});
</script>
</html>
Stack Overflow用户
发布于 2020-06-05 00:47:50
我试着根据你的php代码编写html代码，如下所示。
并在控制台测试jQuery代码，如下所示
如你所见，它工作得很好。我的jquery代码如下
$(".switch-candy input[type='radio']").click(function() {
console.log($(this).attr('title'))
})但是我想和你的一样，请再检查一遍。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62199598
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号