javascript - 添加后动态添加切换按钮单击一个按钮会影响另一个按钮

Question

您好，我在单击按钮时动态添加切换按钮。但是添加后我点击了一个按钮，点击其他按钮后它工作正常，然后它只会影响第一个按钮。

请帮帮我!

HTML代码:

<div id='test'>
    <button onclick="myFunction()">
        Add toggle button
    </button>
</div>

CSS 代码:

 #switchdiv
{
clear: both;
margin:1px;
}

input.switch:empty
{
margin-left: -999px;
}

input.switch:empty ~ label
 {
position: relative;
float: left;
line-height: 1.6em;
text-indent: 4em;
margin: 0.2em 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
 }

input.switch:empty ~ label:before, 
input.switch:empty ~ label:after
{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: ' ';
width: 3.6em;
background-color: #c33;
border-radius: 0.3em;
box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
-webkit-transition: all 100ms ease-in;
     transition: all 100ms ease-in;
 }

input.switch:empty ~ label:after
{
width: 1.4em;
top: 0.1em;
bottom: 0.1em;
margin-left: 0.1em;
background-color: #fff;
border-radius: 0.15em;
box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}

 input.switch:checked ~ label:before
{
background-color: #393;
 }

input.switch:checked ~ label:after
{
margin-left: 2.1em;
}

JavaScript 代码:

$('button').click(function() {
    var element = $('#test');
    var toggle_button = '<div id="switchdiv">\
        <input type="checkbox" id="switch1" name="switch1" class="switch" visible="false"/>\
        <label for="switch1">first switch</label>\
        </div>';
    element.append(toggle_button);
});

Answer 1

问题是，您生成的输入具有相同的 ID，所以我所做的只是声明一个 id 变量，每次点击时该变量都会递增，然后我在您的 input< 中使用它 和 标签。我只改变了你的 javascript，其他一切都一样。

var id = 0;
$('button').click(function() {
    var element = $('#test');
    var toggle_button = '<div id="switchdiv">\
        <input type="checkbox" id="switch' + id + '" name="switch' + id + '" class="switch" visible="false"/>\
        <label for="switch' + id + '">first switch</label>\
        </div>';
    element.append(toggle_button);
    id++;
});

 #switchdiv
{
clear: both;
margin:1px;
}

input.switch:empty
{
margin-left: -999px;
}

input.switch:empty ~ label
 {
position: relative;
float: left;
line-height: 1.6em;
text-indent: 4em;
margin: 0.2em 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
 }

input.switch:empty ~ label:before, 
input.switch:empty ~ label:after
{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: ' ';
width: 3.6em;
background-color: #c33;
border-radius: 0.3em;
box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
-webkit-transition: all 100ms ease-in;
     transition: all 100ms ease-in;
 }

input.switch:empty ~ label:after
{
width: 1.4em;
top: 0.1em;
bottom: 0.1em;
margin-left: 0.1em;
background-color: #fff;
border-radius: 0.15em;
box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}

 input.switch:checked ~ label:before
{
background-color: #393;
 }

input.switch:checked ~ label:after
{
margin-left: 2.1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id='test'>
    <button onclick="myFunction()">
        Add toggle button
    </button>
</div>