如何从toggle转换为onclick

How to convert from toggle to onclick

本文关键字：onclick 转换 toggle      更新时间：2023-09-26

我有一个在元素之间切换的三元素跨度，但我想改为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>

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

$(".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/

我希望它能有所帮助！

所以我发现把它变成"虚拟"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));
                       }
                 },
相关文章：