Question

我有一个三元素跨度可以在元素之间切换，但是想把它变成一个onclick事件。想知道如何实现这一目标吗？

"tap .date-toggle": function () {
    var which
    if (this.$(".toggle-today").hasClass("active")) {
        $(".toggle-today").removeClass("active")
        $(".toggle-yesterday").addClass("active")
        which = "yesterday"
    } else if (this.$(".toggle-yesterday").hasClass("active")) {
        $(".toggle-yesterday").removeClass("active")
        $(".toggle-WTD").addClass("active")
        which = "WTD"
    } else if (this.$(".toggle-WTD").hasClass("active")) {
        $(".toggle-WTD").removeClass("active")
        $(".toggle-today").addClass("active")
        which = "today"
    }
    this.trigger("switchSalesDate", which, _.bind(this.updateSalesList, this));
},

<div class="date-toggle">
    <span class="toggle-today active">Today</span> 
    | 
    <span class="toggle-yesterday">Yesterday</span> 
    | 
    <span class="toggle-WTD">WTD</span> 
</div>

Answer 1

我不确定，但我认为你的意思是这样的：

$(".date-toggle").on("click" , function(){
    $(".date-toggle").not(this).removeClass('active');
    $(this).addClass('active');

    var day =  $(this).data('title');
    $('#daySelected').text(day);
});

http://jsfiddle.net/u94fvb2g/

我希望它有所帮助！

Answer 2

所以我实际上发现将它变成“虚拟”onclick事件更容易，如下所示：

                    "tap .toggle-yesterday" : function() {
                       if (!$(".toggle-yesterday").hasClass("active")) {
                              $(".toggle-yesterday").addClass("active")
                              $(".toggle-today,.toggle-WTD").removeClass("active")
                              this.trigger("switchSalesDate", "yesterday", _.bind(this.updateSalesList, this));
                       }

                 },

                 "tap .toggle-today" : function() {
                       if (!$(".toggle-today").hasClass("active")) {
                              $(".toggle-today").addClass("active")
                              $(".toggle-yesterday,.toggle-WTD").removeClass("active")
                              this.trigger("switchSalesDate", "today", _.bind(this.updateSalesList, this));
                       }
                 },

                 "tap .toggle-WTD" : function() {
                       if (!$(".toggle.WTD").hasClass("active")) {
                              $(".toggle-WTD").addClass("active")
                              $(".toggle-today,.toggle-yesterday").removeClass("active")
                              this.trigger("switchSalesDate", "WTD", _.bind(this.updateSalesList, this));
                       }
                 },

如何将toggle转换为onclick

2 个答案: