Reputation: 4006
What should happen is that when 'All days' button is clicked obviously all the days are set to active, weekdays only Mon - Fri etc etc.
I have the following JQuery which is toggling classes
$(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');
});
});
But i have an issue where if i click the 'Weekdays' only it highlights Mon-Fri but then if i click 'All Weekends', my Mon to Fri are still highlighted and this happens which ever other button i click, it doesn't appear to be adding my classes correctly.
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>
I cant see where i going wrong as im hitting the correct consolelog
for each button click.
When i check the dev tools though it displays weird as show below
Initial page load Clicked 'All Weekdays' button
Or is there a better way of doing this completely.
I have a working copy on fiddle but it doesn't work in my code http://jsfiddle.net/2pcgnz0w/1/
Upvotes: 0
Views: 128
Reputation: 10922
Your problem was that you weren't removing the right classes.
Your removeClass('btn-default')
should be 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>
To go even further and allow a double click to remove the classes you could do the following :
$(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>
Upvotes: 2