javascript - Jquery 和 Ruby - 切换功能不起作用

Question

有人能告诉我为什么我的 javascript 代码不工作

我正在使用 gem simple_form，我想做的是:

• 当用户点击红色方框(如图所示)时，空的红色方框图像应变为勾选框
• 我有 2 个 css 图片； img-checkbox-notick.png(无勾选框图片)& img-checkbox-tick.png(勾选框图片)

我正在使用 javascript/切换

new.html.erb

<div class="checkbox custom">
    <%= f.input :remember_me, input_html: { class: 'css-checkbox' }, label_html: { class: 'css-label-notick' }, as: :boolean if devise_mapping.rememberable? %>
 </div>

javascript file

$(document).ready(function() {
  $('.css-label-notick').on('click', function (e) {
      $('.css-label-notick').toggleClass(".css-label-tick");
  });
});

我已经在以红色突出显示的图像中显示了输入的详细信息

css file

.css-label-notick {
  background: url("img-checkbox-notick.png") no-repeat;
  height: 65px;
}

.css-label-tick {
  background: url("img-checkbox-tick.png") no-repeat;
  height: 65px;
}

任何建议将不胜感激 - 非常感谢

Answer 1

使用 toggleClass 方法时，类名前不需要加句点(.)。

 $(document).ready(function () {
        $('.css-label-notick').on('click', function (e) {
            $(this).toggleClass("css-label-tick");
        });
    });

工作示例:http://jsfiddle.net/xno5hb34/3/