从循环中获取Jquery Toogle按钮的值。

Question

我想在一个php循环中保留3个toggle按钮，属性名用动态值填充。

通过使用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>

每当我点击任何一个按钮时，我只得到第一个按钮的属性。我无法获取第2个& 3个toggle按钮的属性。

任何建议都非常感激。

谢谢你的建议

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

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

Answer 2

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

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

如你所见，它运行得很好，我的jquery代码如下

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

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

从循环中获取Jquery Toogle按钮的值。

问题描述投票：0回答：1

1个回答

最新问题

从循环中获取Jquery Toogle按钮的值。

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1