我正试图将选中时更改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;"> </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>
更新!!!根据"重复"建议
看完这个问题(这很有帮助)后,我已经把代码改成了这个,但我仍然无法让它工作。我想知道它是否在找到确切的输入类时遇到了问题?因为插件将复选框转换为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>
以上不起作用有两个原因:
- 在加载jQuery之前要运行脚本,所以像
$(".class")
这样的命令不会被理解 - 您在加载内容之前运行脚本,因此例如
var $input_class = $('.addCheckbox');
将为空,因为带有类addCheckbox的元素还不存在。[对于本例,假设jQuery包含在脚本之前,但脚本仍在<head>
]中