Question

我有一个待办事项列表应用程序，其中包含完整/不完整的任务按钮。我想在单击它时切换按钮类和按钮值之间切换。我按下按钮来更改第一次单击，但后续单击同一按钮不会改变按钮。我检查了我的日志，并在第一次点击后调用了todo #update方法，但是在第一次点击后它似乎没有在update.js.erb中运行我的javascript代码。

在我的update.js.erb文件中：

// change color
$("#todo-button-<%=@todo_id%>").attr('class', "<%=button_class%>");

// change button text
$("#todo-button-<%=@todo_id%>").attr('value', "<%=button_status%>");

这是index.html.erb中的按钮

<%= button_to button_status,
    update_todo_path( todo_id: todo["id"],
                      description: todo["description"],
                      is_complete: todo["is_complete"]
                      ),
    remote: true,
    class: "#{button_class}",
    id: "todo-button-#{todo["id"]}"%>

Answer 1

我最终通过使用点击功能来解决这个问题。我的代码比我想要的更详细，但有效：

$('.todo-button').click(function(){
    if($(this).hasClass("btn-primary")){
        $(this).removeClass("btn-primary");
        $(this).addClass("btn-success");
        $(this).val("Incomplete");
    }else  if($(this).hasClass("btn-success")){
        $(this).removeClass("btn-success");
        $(this).addClass("btn-primary");
        $(this).val("Complete");
    }
});

我的update.js.erb文件仅在第一次按钮点击时运行，而不是在后续点击时运行（更改按钮的类和点击值）

1 个答案: