如何使用javascript删除css类？答案

【问题标题】：How to remove css class using javascript?如何使用javascript删除css类？
【发布时间】：2018-08-22 03:09:59
【问题描述】：

我正在尝试使用我的 rails 表单中的 javascript 删除一个 css 类。

这是我目前所拥有的。目标是在 drink 变量为 Coffee 时显示部分表单。

这是我的表格：

<%= simple_form_for(@order) do |f| %>
<%= f.error_notification %>
<div class="field">
Drink: <%= f.select :drink, ["Coffee", "Orange Juice", "Tea"], id: 'extended_list' %><br />
</div>
<div id="js-coffee-type" class="d-none">Coffee Type: <%= f.select :coffee_type, ['Espresso', 'Cappuccino', 'Filter', 'Greek', 'Frappe', 'Latte'] %></div>

Sugar Amount: <%= f.select :sugar_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %><br />

Milk Amount: <%= f.select :milk_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %><br />
  <%= f.button :submit, class: "button is-info" %>
  <% end %>
    <style>
    .d-none { display: none; }
    </style>
  <script>
    $("#extended_list").change(function() {
      var drinks = $("#extended_list").val();
      if (drinks == "Coffee") {
        $(".js-coffee-type").removeClass("d-none");
      } else {
        $(".js-coffee-type").addClass("d-none");
      }
    });
    </script>

【问题讨论】：

标签： javascript css ruby-on-rails

【解决方案1】：

你很亲密。当您选择 div 来删除类 `d-none 时，您使用的是类选择器而不是 ID 选择器。

变化：

  if (drinks == "Coffee") {
    $(".js-coffee-type").removeClass("d-none");
  } else {
    $(".js-coffee-type").addClass("d-none");
  }

收件人：

  if (drinks == "Coffee") {
    $('#js-coffee-type').removeClass('d-none');
  } else {
    $('#js-coffee-type').addClass('d-none');
  }

【讨论】：

我意识到这是正确的语法，但我仍然无法获得正确的输出。是否有可能我从饮料选择表中检索到的值不正确？
可能会发生很多事情。我认为最简单的调试方法是将debugger 放在您的$("#extended_list").change 函数中。从那里你可以推断出是 1) 选择了正确的列表 2) var drinks 设置正确还是 3) 类被删除了
解决方案是什么？另外，如果您可以打勾以接受有帮助的答案；）

【解决方案2】：

您的代码中似乎有错字，您的 DOM 选择器应该使用 id 定位您的 div，如下所示：

$("#js-coffee-type").removeClass("d-none");

【讨论】：

【解决方案3】：

您需要使用 ID 选择器而不是类选择器。此外，您可以考虑将条件语句合并到以下内容：

$('#js-coffee-type').toggleClass('d-none', drinks == "Coffee");

如jQuery documentation 中所示，您可以为类的state 传递第二个参数，允许您控制是启用还是禁用该类。

【讨论】：