jQuery Toggle类不切换

Muiter 发表于 Dev

Muiter

当用户单击切换按钮时，我会将名称更改为的所有类更改textfield为editable_textfield

我正在使用此切换按钮/复选框

<input id="toggle-event" type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>" data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger">

当用户单击按钮时，类别没有变化，这里有1个此类的示例

<span class="textfield" data-type="text" data-name="naam" data-
pk="'.$row_table_1['id'].'" data-url="post.php">'.$row_table_1['naam'].'</span>

jQuery已加载在此页面上。

$(function() {
    $('#toggle-event').change(function() {
        $(element).toggleClass("textfield editable_textfield");
    })
})

有什么建议么？

如果要使复选框切换跨度状态，则必须toggleClass在多个元素上执行该功能，如下所示。我为演示用纯文本替换了您的复选框值，并添加了几个span元素，包括为其类设计样式textfield并editable_textfield演示行为。

$('#toggle-event').change(function() {
  $('.textfield, .editable_textfield').toggleClass('textfield editable_textfield');
});

span.textfield {
  background: red;
}

span.editable_textfield {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="toggle-event" type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>" data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger">

<span class="textfield" data-type="text" data-name="naam" data-
pk="'.$row_table_1['id'].'" data-url="post.php">Hello World</span>

<span class="textfield" data-type="text" data-name="naam" data-
pk="'.$row_table_1['id'].'" data-url="post.php">Hello World</span>

<span class="editable_textfield" data-type="text" data-name="naam" data-
pk="'.$row_table_1['id'].'" data-url="post.php">Hello World</span>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。