0

我正在尝试将在检查时更改 tr 类的 JQuery 转换为在按钮获取名为“活动”的类时更改 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;
      }
4

1 回答 1

1

由于不熟悉该语言，您的代码中存在问题。还要记住你发布的这个 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>] 中。
于 2016-03-31T19:12:23.387 回答