从循环内部获取 Jquery Toggle 按钮值答案

【问题标题】：Get Jquery Toogle button value from inside a loop从循环内部获取 Jquery Toggle 按钮值
【发布时间】：2020-09-23 17:32:38
【问题描述】：

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

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

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

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

非常感谢任何建议。

谢谢

【问题讨论】：

你能附上渲染的html代码吗？我想说你删除 id attr。因为，您的代码会生成重复的 id。
@TomaszBucko，如果我删除了 id attr，则切换功能不起作用..
请检查我的答案。我尝试根据您的 php 代码构建 html 代码。并在镀铬检查控制台上进行测试。它正在工作。
对于 ids，我认为这并不重要。但同一页面中存在相同的 id 不是标准的。
@TomaszBucko，我需要在循环中而不是在 html 代码中，如果你有一个可行的想法，请告诉我。

标签： jquery toggle togglebutton

【解决方案1】：

您的按钮上有重复的 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>

【讨论】：

我认为 id 对于当前问题无关紧要。如您所见，我使用具有重复 ID 的对象进行了测试。但它正在工作。

【解决方案2】：

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

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

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

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

但我认为它与您的相同，请再次检查。

【讨论】：

我确实在我的机器上进行了本地测试，我的解决方案有效，但你的结果仍然与 OP 相同，不知道为什么我被否决（我不是责怪你我什至赞成你的答案：P )。
对此感到抱歉。我弟弟做到了。当我尝试还原时，您删除了答案:(
不用担心，我会再次发布我的答案，你可以删除它:)
@ROOT，我已经从答案中复制了你的代码，它对我有用，我一直保持自动递增值效果很好。谢谢你，你节省了我的时间。
好的。我会做。 :-D