jQuery Toggle类不切换 [英] jQuery Toggle classes not toggeling

查看:64
本文介绍了jQuery Toggle类不切换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

When a user click an toggle button I would to change all classes with the name textfield to editable_textfield

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

I am using this toggle button / checkbox

<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个此类的示例

When a user click the button there is no change of class, I have here 1 example of this class

<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已加载在此页面上.

jQuery is loaded on this page.

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

有什么建议吗?

推荐答案

如果要使复选框 toggle 处于跨度状态,则必须对多个元素执行toggleClass函数, 如下所示.我为演示用纯文本替换了您的复选框值,并在其类textfieldeditable_textfield中添加了一些样式元素,包括样式,以演示行为.

If you want to make the checkbox toggle the span's state, then you would have to execute the toggleClass function on multiple elements, as shown below. I replaced your checkbox value with plain text for the demo and added several span elements including styling to their classes textfield and editable_textfield to demonstrate behavior.

$('#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>

这篇关于jQuery Toggle类不切换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆