Jquery翻转开关附加文本

Question

Here is my fiddle

HTML

<div 
     class="slider-toggle-container"
     style="float: left"
     data-initialvalue="0"
     data-height="32"
     data-width="82"
     data-ballwidth="32"
     data-tabindex="undefined"
     data-speed="550">

    <span id="myToggleLabel" class="slider-toggle-label-text">
        Like this toggle?
    </span>

    <label for="leftInput">YES</label>
    <input id="leftInput" type="radio" name="enabled" value="1">

    <label for="rightInput">NO</label>
    <input id="rightInput" type="radio" name="enabled" value="0">

</div>


        <div 
     class="slider-toggle-container"
     style="float: left"
     data-initialvalue="0"
     data-height="32"
     data-width="82"
     data-ballwidth="32"
     data-tabindex="undefined"
     data-speed="550">



    <label for="leftInput">YES</label>
    <input id="leftInput" type="radio" name="enabled" value="1">

    <label for="rightInput">NO</label>
    <input id="rightInput" type="radio" name="enabled" value="0">

</div>

我的代码在这里：

jQuery(document).ready(function () {

    jQuery('.slider-toggle-container').sliderToggle();

});

我在翻转开关中同时附加文字？我该如何解决这个问题？

Answer 1

我认为删除Label Text ..解决了问题

    <label for="leftInput"></label>
    <input id="leftInput" type="radio" name="enabled" value="1">

    <label for="rightInput"></label>
    <input id="rightInput" type="radio" name="enabled" value="0">

因为class，ids都相似

Try Fiddle

Answer 2

有点难以发现代码墙，但是您为两个滑块使用重复的ID ，这就是问题所在

<div>
    <label for="leftInput">YES</label>
    <input id="leftInput" type="radio" name="enabled" value="1">

    <label for="rightInput">NO</label>
    <input id="rightInput" type="radio" name="enabled" value="0">
</div>
<div>
    <label for="leftInput">YES</label>
    <input id="leftInput" type="radio" name="enabled" value="1">

    <label for="rightInput">NO</label>
    <input id="rightInput" type="radio" name="enabled" value="0">
</div>

FIDDLE

当标签和ID匹配两次时，它不仅标记无效，而且插件获取文本两次，这就是您在滑块中看到两次的原因。