gpt4 book ai didi

javascript - 检测 Bootstrap Switch Jquery 中的类更改(将工作复选框 JS 转换为按钮 JS)

转载 作者:行者123 更新时间:2023-12-03 07:17:51 24 4
gpt4 key购买 nike

我正在尝试将一段在检查时更改 tr 类的 JQuery 转换为一段在按钮获取名为“active”的类时更改 tr 类的 JQuery。我是一个 JQuery/Javascript 新手,我很茫然。

对于那些建议它是重复的人,我尝试检测类但失败了(更新了下面的代码)。

原始代码(有效)

javascript:
var $input_class = $('.addCheckbox');
function setClass() {
var tr = $(this).closest( "tr" );
if ($(this).prop('checked') == true){
tr.addClass( "highlight" );
}
else{
tr.removeClass( "highlight" );
}
}
for(var i=0; i<$input_class.length; i++) {
$input_class[i].onclick = setClass;
}

我可怕的尝试(更新如下......不再是这个)

javascript:
var $input_class = $('.btn-group .btn-toggle .btn');
function setClass() {
var tr = $(this).closest( "tr" );
if ($(this).prop('.btn-success .active')){
tr.addClass( "highlight" );
}
else{
tr.removeClass( "highlight" );
}
}
for(var i=0; i<$input_class.length; i++) {
$input_class[i].onclick = setClass;
}

我正在使用 Bootstrap Switch 插件,它将复选框转换为切换开关 http://www.bootstrap-switch.org/

转换后的 html 如下所示:

<tr>  
<td width="15px"><input class="addCheckbox" type="checkbox" value="true" style="display: none;">
<div class="btn-group btn-toggle" style="white-space: nowrap;">
<button class="btn active btn-success btn-md" style="float: none; display: inline-block; margin-right: 0px;">YES</button>
<button class="btn btn-default btn-md" style="float: none; display: inline-block; margin-left: 0px;">&nbsp;&nbsp;&nbsp;</button>
</div>
</td>
<td width="85px">May 2016</td><td class="restaurant-name">
Joe's Crab Shack
</td>
<td class="text-center">
#my table info
</td>
</tr>

更新!!!根据“重复”建议。

看完这个question (这非常有帮助),我已将代码更改为此,但仍然无法使其工作。我想知道是否无法找到确切的输入类?因为该插件将复选框转换为 html,所以我无法(或不知道如何)为按钮设置特定名称或 id。

 javascript:
var $input_class = $('.btn');
var tr = $(this).closest( "tr" );
function checkForChanges()
{
if ($('.btn').hasClass('btn-success'))
tr.addClass( "highlight" );

else
tr.removeClass( "highlight" );
}
for(var i=0; i<$input_class.length; i++) {
$input_class[i].onclick = checkForChanges;
}

最佳答案

由于不熟悉该语言,您的代码中存在问题。另请记住您发布的内容是 jQuery,而不是 javascript。

由于我不太确定您的最终目标是什么,所以让我们一步一步来。

首先:

$('.btn-group .btn-toggle .btn');

以上表示具有所有三个类的元素 class="btn-group btn-toggle btn"我在你的代码中没有看到这样的情况。您确定不想使用 $('.btn-group, .btn-toggle, .btn'); ?此刻var $input_class是空的,所以稍后在您的代码中您不会循环任何内容。

第二件事:正如我在评论中发布的,请确保在加载 jQuery 和页面的其余内容后运行脚本。如果您的脚本位于 jQuery 之上,如下所示:

<head>
<script type="text/javascript">/* Your script here */</script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head>

以上方法不起作用有两个原因:

  1. 您在加载 jQuery 之前运行脚本,因此像 $(".class") 这样的命令不被理解。
  2. 您在加载内容之前运行脚本,例如 var $input_class = $('.addCheckbox');将为空,因为带有类 addCheckbox 的元素尚不存在。 [对于这一点,假设 jQuery 包含在脚本之前,但脚本仍在 <head> 内。 ].

关于javascript - 检测 Bootstrap Switch Jquery 中的类更改(将工作复选框 JS 转换为按钮 JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36341223/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com