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

detecting class changes in Bootstrap Switch Jquery (converting working checkbox JS to button js)

本文关键字:JS 复选框 工作 转换 按钮 Jquery Switch Bootstrap 检测      更新时间:2023-10-24

我正试图将选中时更改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>

更新!!!根据"重复"建议

看完这个问题(这很有帮助)后,我已经把代码改成了这个,但我仍然无法让它工作。我想知道它是否在找到确切的输入类时遇到了问题?因为插件将复选框转换为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>]中