jQuery添加/刪除類無法正常工作

Question

我有一個如下所示的表格

應該發生的事情是，當單擊“所有天數”按鈕時，顯然所有天數都被設置為活動狀態，僅工作日為周一至周五等。

我有下面的JQuery切換類

    $(document).ready(function () {
        $("#allDays").on('click', function (event) {
            console.log("1");
            $("button[name = 'weekdaysbutton']").addClass('btn-primary');
            $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
        });
        $("#allWkDays").on('click', function (event) {
            console.log("2");
            $("button[name = 'weekdaysbutton']").addClass('btn-primary');
            $("button[name = 'weekenddaysbutton']").removeClass('btn-default');
        });
        $("#allWkEnds").on('click', function (event) {
            console.log("3");
            $("button[name = 'weekdaysbutton']").removeClass('btn-default');
            $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
        });
    });

但是我有一個問題，如果我單擊“工作日”僅會突出顯示周一至周五，但是如果我單擊“所有周末”，則我的周一至周五仍會突出顯示，並且無論我單擊哪個其他按鈕，都不會似乎正確添加了我的課程。

的HTML

<div class="form-horizontal">
<div class="form-group">
    <label class="col-lg-2 control-label" for="allDays">
        Days of the week
    </label>
    <div class="col-lg-4">
        <button id="allDays" name="allDays" class="btn btn-green"
            type="button">
            All Days
        </button>
        <button id="allWkDays" name="allWkDays" class="btn btn-green"
            type="button">
            Weekdays Only
        </button>
        <button id="allWkEnds" name="allWkEnds" class="btn btn-green"
            type="button">
            Weekends Only
        </button>
    </div>
</div>
</div>
<div class="form-horizontal">
    <div class="form-group">
        <div class="col-lg-2"></div>
        <div class="col-lg-4">
            <button id="mon" name="weekdaysbutton" class="btn btn-default"
                type="button">Mon</button>
            <button id="tue" name="weekdaysbutton" class="btn btn-default"
                type="button">Tue</button>
            <button id="wed" name="weekdaysbutton" class="btn btn-default"
                type="button">Wed</button>
            <button id="thur" name="weekdaysbutton" class="btn btn-default"
                type="button">Thur</button>
            <button id="fri" name="weekdaysbutton" class="btn btn-default"
                type="button">Fri</button>
            <button id="sat" name="weekenddaysbutton" class="btn btn-default"
                type="button">Sat</button>
            <button id="sun" name="weekenddaysbutton" class="btn btn-default"
                type="button">Sun</button>
        </div>
    </div>
</div>

我看不到我出了什么問題，因為每次單擊按鈕都擊中正確的consolelog 。

當我檢查開發工具時，盡管它顯示如下圖所示

初始頁面加載 點擊“所有工作日”按鈕

或者有沒有更好的方法可以完全做到這一點。

我在小提琴上有一個工作副本，但是在我的代碼http://jsfiddle.net/2pcgnz0w/1/中不起作用

Answer 1

您的問題是您沒有刪除正確的類。

您的removeClass('btn-default')應該是removeClass('btn-primary')

 $(document).ready(function() { $("#allDays").on('click', function(event) { $("button[name = 'weekdaysbutton']").addClass('btn-primary'); $("button[name = 'weekenddaysbutton']").addClass('btn-primary'); }); $("#allWkDays").on('click', function(event) { $("button[name = 'weekdaysbutton']").addClass('btn-primary'); $("button[name = 'weekenddaysbutton']").removeClass('btn-primary'); }); $("#allWkEnds").on('click', function(event) { $("button[name = 'weekenddaysbutton']").addClass('btn-primary'); $("button[name = 'weekdaysbutton']").removeClass('btn-primary'); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" /> <div class="form-horizontal"> <div class="form-group"> <label class="col-lg-2 control-label" for="allDays"> Days of the week </label> <div class="col-lg-4"> <button id="allDays" name="allDays" class="btn btn-green" type="button"> All Days </button> <button id="allWkDays" name="allWkDays" class="btn btn-green" type="button"> Weekdays Only </button> <button id="allWkEnds" name="allWkEnds" class="btn btn-green" type="button"> Weekends Only </button> </div> </div> </div> <div class="form-horizontal"> <div class="form-group"> <div class="col-lg-2"></div> <div class="col-lg-4"> <button id="mon" name="weekdaysbutton" class="btn btn-default" type="button">Mon</button> <button id="tue" name="weekdaysbutton" class="btn btn-default" type="button">Tue</button> <button id="wed" name="weekdaysbutton" class="btn btn-default" type="button">Wed</button> <button id="thur" name="weekdaysbutton" class="btn btn-default" type="button">Thur</button> <button id="fri" name="weekdaysbutton" class="btn btn-default" type="button">Fri</button> <button id="sat" name="weekenddaysbutton" class="btn btn-default" type="button">Sat</button> <button id="sun" name="weekenddaysbutton" class="btn btn-default" type="button">Sun</button> </div> </div> </div> 

要進一步操作並允許雙擊刪除這些類，可以執行以下操作：

 $(document).ready(function() { var all = false $("#allDays").on('click', function(event) { if ($("button[name = 'weekdaysbutton']").hasClass('btn-primary') && $("button[name = 'weekenddaysbutton']").hasClass('btn-primary')) { $("button[name = 'weekdaysbutton']").removeClass('btn-primary'); $("button[name = 'weekenddaysbutton']").removeClass('btn-primary'); } else { all = true $("button[name = 'weekdaysbutton']").addClass('btn-primary'); $("button[name = 'weekenddaysbutton']").addClass('btn-primary'); } }); $("#allWkDays").on('click', function(event) { if ($("button[name = 'weekdaysbutton']").hasClass('btn-primary') && !all) { $("button[name = 'weekdaysbutton']").removeClass('btn-primary'); } else { all = false $("button[name = 'weekdaysbutton']").addClass('btn-primary'); $("button[name = 'weekenddaysbutton']").removeClass('btn-primary'); } }); $("#allWkEnds").on('click', function(event) { if ($("button[name = 'weekenddaysbutton']").hasClass('btn-primary') && !all) { $("button[name = 'weekenddaysbutton']").removeClass('btn-primary'); } else { all = false $("button[name = 'weekenddaysbutton']").addClass('btn-primary'); $("button[name = 'weekdaysbutton']").removeClass('btn-primary'); } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" /> <div class="form-horizontal"> <div class="form-group"> <label class="col-lg-2 control-label" for="allDays"> Days of the week </label> <div class="col-lg-4"> <button id="allDays" name="allDays" class="btn btn-green" type="button"> All Days </button> <button id="allWkDays" name="allWkDays" class="btn btn-green" type="button"> Weekdays Only </button> <button id="allWkEnds" name="allWkEnds" class="btn btn-green" type="button"> Weekends Only </button> </div> </div> </div> <div class="form-horizontal"> <div class="form-group"> <div class="col-lg-2"></div> <div class="col-lg-4"> <button id="mon" name="weekdaysbutton" class="btn btn-default" type="button">Mon</button> <button id="tue" name="weekdaysbutton" class="btn btn-default" type="button">Tue</button> <button id="wed" name="weekdaysbutton" class="btn btn-default" type="button">Wed</button> <button id="thur" name="weekdaysbutton" class="btn btn-default" type="button">Thur</button> <button id="fri" name="weekdaysbutton" class="btn btn-default" type="button">Fri</button> <button id="sat" name="weekenddaysbutton" class="btn btn-default" type="button">Sat</button> <button id="sun" name="weekenddaysbutton" class="btn btn-default" type="button">Sun</button> </div> </div> </div>