Question

我正在尝试使用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>

Answer 1

您非常亲密。选择Player删除类d-none时，您使用的是类选择器而不是ID选择器。

更改：

cin>>name;
the_player.setName(name);

收件人：

div

Answer 2

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

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

Answer 3

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

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

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

如何使用JavaScript删除CSS类？

3 个答案: