I'm wondering if there's a way to simplify this code.
Basically, #griffyindor has the 'active' class by default when the page loads. When it has the 'active' class, I want all the other houses (slytherin, ravenclaw, and hufflepuff) to show. However, at some point it may lose its 'active' class when I click on something else. But when I click back to it, I want the initial behavior again.
Is there a way to simplify what's below to check when gryffindor has the 'active' class OR when gryffindor is clicked on (so that it gets the 'active' class)?
$(function() {
var gryffindor = $('#gryffindor');
if (gryffindor.hasClass('active')) {
console.log('show all the houses');
$('#slytherin, #ravenclaw, #hufflepuff').show();
}
gryffindor.bind('click', function() {
if (gryffindor.hasClass('active')) {
console.log('all is active');
$('#slytherin, #ravenclaw, #hufflepuff').show();
}
});
});
How about:
$(function() {
$('#gryffindor').on('click', function(e) {
this.toggleClass('active');
if (this.hasClass('active'); {
$('#slytherin, #ravenclaw, #hufflepuff').show();
} /*else {
$('#slytherin, #ravenclaw, #hufflepuff').hide();
}*/ //Not sure if this is part of what you want
}
});
$(function() {
var $gryffindor = $('#gryffindor');
$('#slytherin, #ravenclaw, #hufflepuff').hide();
$gryffindor.on('click', function(e) {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('#slytherin, #ravenclaw, #hufflepuff').show();
} else {
$('#slytherin, #ravenclaw, #hufflepuff').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="gryffindor">Griffindor</button>
<div id="slytherin">slytherin</div>
<div id="ravenclaw">ravenclaw</div>
<div id="hufflepuff">hufflepuff</div>
Try this:
var houses = $("#houses li");
$(document).on('click', '#houses li', function(){
var activate_house = this;
$(houses).each(function (index) {
var house = this
$(house).removeClass('active');
$(house).removeClass('show');
});
$(activate_house).addClass('active');
showHouses();
});
function showHouses(){
$(houses).each(function (index) {
if(!$(this).hasClass('active')){
$(this).addClass('show');
}
});
}
showHouses();
.show{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="houses">
<li class="active" id="gryffindor">gryffindor</li>
<li id="slytherin">slytherin</li>
<li id="ravenclaw">ravenclaw</li>
<li id="hufflepuff">hufflepuff</li>
</ul>
not minify your code but simplify the reading and adds semantic, see JSFIDDLE
Related
I am creating a toggle and need to execute a command based on the toggle status.
When I click .flip1 first time it adds the flipped class to .card1.
I also want it to show an alert "flipped added"
When I click it again it removes the flipped class and I want it to show an alert "flipped removed".
I imagine that the code will look something like this:
$(document).ready(function () {
$('.flip1').click(function () {
$('.card1').toggleClass('flipped');
if ("class added"){
alert("flipped added");
}
if ("class removed"){
alert("flipped removed");
}
});
});
Is there something I can put in the if to know whether the toggle is true or false?
This can be achieved via jQuery's hasClass() method like so:
$(document).ready(function() {
$('.flip1').click(function() {
$('.card1').toggleClass('flipped');
// use hasClass to see if .card1 has .flipped class now applied.
// if true, that indicates it was just added
if ($('.card1').hasClass('flipped')) {
alert("flipped added");
} else {
alert("flipped removed");
}
}
);
});
.flipped {
background:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="card1">
Card1 (yellow if flipped)
</div>
<a href="#" class="flip1">
Flip1
</a>
You can use addClass() and .removeClass() to change class and .hasClass() to check the state.
Here is your code :
$(document).ready(function () {
$('.flip1').on('click', function () {
if ( $('.card1').hasClass('flipped') ) {
$('.card1').removeClass('flipped');
alert("flipped removed");
} else {
$('.card1').addClass('flipped');
alert("flipped added");
}
});
});
$(document).ready(function () {
$('.flip1').on('click', function () {
if ( $('.card1').hasClass('flipped') ) {
$('.card1').removeClass('flipped');
alert("flipped removed");
}
else {
$('.card1').addClass('flipped');
alert("flipped added");
}
});
});
I want to display a different image when clicking on my image. A demo is here. When clicking on the image the image should change to an arrow pointing up instead of pointing down. How do I do that?
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<div id="flip"><img src="http://i.imgur.com/YCf5zYt.png"></div>
<div id="panel" style="display: none;"><p><i><strong>CONTENT</strong></i></p>
</div>
</td>
JS
var toggled = false;
$("img").click(function () {
if (!toggled) {
$(this).css("", "url(http://i.imgur.com/YCf5zYt.png)");
toggled = true;
} else {
$(this).css("", "url(http://i.imgur.com/V4fKMWS.png)");
toggled = false;
}
$("p").slideToggle();
})
$(document).ready(function () {
$("#flip").click(function () {
$("#panel").slideToggle("slow");
});
});
Here's another solution with toggleClass() and attr() function :
See this fiddle
$(document).ready(function () {
$("img").click(function () {
$(this).toggleClass('active');
if($(this).hasClass('active')){
$(this).attr("src","http://i.imgur.com/V4fKMWS.png");
} else {
$(this).attr("src","http://i.imgur.com/YCf5zYt.png");
}
$("#panel").slideToggle();
});
});
There are a couple of issues with the code:
First of all, you have to attach all of the event handlers from within the document ready callback. As it stands right now, it is possible that event handler is not attached because image tag may be not yet loaded when you try to attach the handler.
You also have to modify the src attribute of the image, not the css's url style:
$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
you can change the attribue src.
if (!toggled) {
$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
toggled = true;
} else {
$(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
toggled = false;
}
Refer link: https://jsfiddle.net/sj7o9x58/2/
there a mistakes in your code try this
var toggled = false;
$("img").click(function () {
if (!toggled) {
$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
toggled = true;
} else {
$(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
toggled = false;
}
$("p").slideToggle();
});
Try to write all your code in $(document).ready(); And you have a big mistake.
You should use .slideToggle() for $("#panel"). And this is easier way to do it(without any variables):
$(document).ready(function(){
$("#flip").click(function(){
if($("#panel").css("display") === "none"){
$("#panel").slideToggle().css("display", "block");
$("img").attr("src", "http://i.imgur.com/V4fKMWS.png");
} else if($("#panel").css("display") === "block"){
$("#panel").slideToggle();
$("img").attr("src", "http://i.imgur.com/YCf5zYt.png");
}
});
});
And demo is here
$(document).ready(function () {
var toggled = true;
$("img").on('click',function () {
if (!toggled) {
$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
toggled = true;
} else {
$(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
toggled = false;
}
$("#panel").slideToggle("slow");
});
});
The updated fiddle: https://jsfiddle.net/sj7o9x58/3/
I don't know if that's the image behavior you want, if it's the oposite just change te toggled initialization to false and the image by default on the src (html).
I have a question that is quite confusing.
Everytime I check a "checkbox", it gets the closest "div" and add the class "hilight" and "marked" and set an Item to LocalStorage called "marking".
When I switch from div 1 to 2, I remove the class "hilight", but i keep the class "marked".
I'm trying to get the LocalStorage, and add class "hilight" again to divs that has "marked"
JS Fiddle: http://jsfiddle.net/b4KgV/
HTML
1
2
<button class="1st">show 1st</button>
<button class="2nd">show 2nd</button>
JS
localStorage.clear();
$(document).on('click', ':checkbox', function () {
if ($(this).is(':checked')) {
$(this).closest("div").addClass('hilight marked');
localStorage.setItem("marking","yes");
}
else {
$(this).closest("div").removeClass('hilight marked');
}
});
$(".1st").on('click', function() {
$(".second").css('display','none');
$(".second").removeClass('hilight');
$(".first").css('display','block');
});
$(".2nd").on('click', function() {
$(".first").css('display','none');
$(".first").removeClass('hilight');
$(".second").css('display','block');
});
if (localStorage.getItem("marking")) {
$(".marked").closest("div").addClass('hilight');
};
Thx.
Localstorage goes by key:value as you know, I tried to keep them separate.
Try this fiddle
http://jsfiddle.net/b4KgV/11/
$(document).on('click', ':checkbox', function () {
var div = $(this).closest("div").attr("id")
if ($(this).is(':checked')) {
$(this).closest("div").addClass('hilight marked');
localStorage.setItem(div, true);
} else {
$(this).closest("div").removeClass('hilight marked');
localStorage.setItem(div, false);
}
});
$(".1st").on('click', function () {
console.log("test")
if (localStorage.getItem("firstDiv") == "true") {
$(".first").closest("div").addClass('hilight');
};
$(".second").css('display', 'none');
$(".second").removeClass('hilight');
$(".first").css('display', 'block');
});
I have created a Javascript toggle menu:
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.toggle').next().slideUp("fast").removeClass("expanded");
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
When I click on another item in the menu, the class "expanded" is not removed from the other elements. I've tried many different things but can't get my head around it. Any help would be appreciated.
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
$(this).addClass('collapsed');
$(this).removeClass('expanded');
} else {
var $expandedItems = $('.expanded');
$expandedItems.next().slideUp("fast")
$expandedItems.addClass('collapsed');
$expandedItems.removeClass('expanded');
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
Based on your comments I think you are after something like this.
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.expanded').removeClass('expanded');//here is your problem
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
This should be remove expanded class from your jquery code
Note Tested although please tell me if its not working
updated
Demo
And for jquery i think you are missing too much information here check demo here Demo
I have a problem to disable my anchor when its being pressed.
HTML:
<a href='#' data-bind='click: clickActivateSpatialSearch' id='draw_polygon'>
<i class='polygon_mark'></i>
</a>
<a href='#' data-bind='click: clickActivateSpatialSearchBox' id='draw_box'>
<i class='square_mark'></i>
</a>
jQuery
$('.square_mark').click(function () {
if(!$(this).hasClass('active')) {
$(this).addClass('active');
$('.polygon_mark').off('click', disabler);
} else {
$(this).removeClass('active');
$('.polygon_mark').on('click', disabler);
}
});
$('.polygon_mark').click(function () {
if(!$(this).hasClass('active')) {
$(this).addClass('active');
$('.square_mark').off('click', disabler);
} else {
$(this).removeClass('active');
$('.square_mark').on('click', disabler);
}
});
});
Function:
disabler: function(event) {
event.preventDefault();
return false;
},
The functionality to change classes are working fine, but what I wanted to add into this, os when anchor #1 is being pressed, this disables the other anchor, and when I press it once again, I'd like it to reenable the anchor, and also the other way around but for anchor #2.
I tried doing something like this, but I cannot get it to work, not fully understanding it either.
Do this and add a disable class to your css.
$('.square_mark').click(function () {
$(this).toggleClass('active');
$('.polygon_mark').toggleClass("disabled");
});
$('.polygon_mark').click(function () {
$(this).toggleClass('active');
$('.square_mark').toggleClass("disabled");
});
this should do the tric.
.disabled {
pointer-events: none;
cursor: default;
}
Edit: example on jsfiddle: http://jsfiddle.net/uKCYN/
And if you need to check for the active class to do something else you can code it like this:
$('.square_mark').click(function () {
if(!$(this).hasClass('active'))
$(this).addClass('active');
else
$(this).removeClass('active');
$('.polygon_mark').toggleClass("disabled");
});
$('.polygon_mark').click(function () {
if(!$(this).hasClass('active'))
$(this).addClass('active');
else
$(this).removeClass('active');
$('.square_mark').toggleClass("disabled");
});
and add your additional stuff into the if clauses.
Just modify the handler function like this and try again:
// handler function
function disabler(event) {
event.preventDefault();
console.log('item anchor clicked');
}