从循环内获取 Jquery 切换按钮值

Question

我试图在 php 循环中保留 3 个切换按钮，属性名称填充了动态值。

通过使用Jquery onclick 事件，我想捕获title 属性。通过代码如下：

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

每当我点击任何按钮时，我只会获得第一个按钮属性。我无法获取第二个和第三个切换按钮的属性。

非常感谢任何建议。

谢谢

Answer 1

我尝试根据您的 php 代码编写 html 代码，如下所示。

并在控制台中测试 jQuery 代码如下

如您所见，它运行良好。我的 jquery 代码如下

$(".switch-candy input[type='radio']").click(function() {
    console.log($(this).attr('title'))
})

但是我觉得和你的一样，请再检查一下。

Answer 2

您的按钮上有重复的 id 和 name 属性，这将使您的 HTML 无效并且 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>

从循环内获取 Jquery 切换按钮值

Get Jquery Toogle button value from inside a loop

jquery

toggle

togglebutton