编写一个大的单击切换按钮来替换单个复选框并提交按钮表单的最佳方法是什么？

Question

我有一个页面,其中包含一个简单的复选框表单,其中包含一个提交按钮,供用户将该项目标记为"想要播放".

鉴于简单,我想用单个DIV和切换按钮或开关或其他东西的图​​形替换它,以便用户可以点击它来标记,但不必打扰愚蠢的单个复选框和提交按钮,相当难看.

我能想到的简短而快速的解决方案是让div成为一个类似的链接

markme.php?id=XYZ&user=123

将该标志弹出到该用户的数据库中,然后重定向回他们正在查看的页面.

那会合理吗？有没有更好的办法？

/我是一个热心的初学者

Answer 1

使它成为一个绑定了它<button>的onclick事件,它执行一个AJAX请求,将请求提交给一些将更新数据库或类似的页面处理程序,并在成功完成后更改其CSS样式以使其看起来被按下.

使用jQuery进行事件绑定,AJAX请求和CSS类更改,这种样式应该可以使按钮看起来很凹陷.

<button type="button" id="btnPlay">Play</button>

然后:

 $("#btnPlay").click(function(){

    var button = $(this) ;

    if (!button.hasClass('pressed')) {
        //button is unpressed
        $.post("ajax.php", { userId: "5512", action: "play" },
            function(data){
               button.addClass('pressed');
               button.html("Playing!") ;
            }
        );
    }
    else {
        //button is pressed, toggle it back
        $.post("ajax.php", { userId: "5512", action: "stopPlaying" },
            function(data){
               button.removeClass('pressed');
               button.html("Play") ;
            }
        );
    }


});