Search jQuery

jQuery Forum

if and else

in Using jQuery • 9 years ago

hi guys i have 2 ids ON and OFF, both in html in the moment, and i using css3 for show or ON or OFF, how can i apply jquery for if ON do something else do another thing? if i only using css3?

i using exaclty this effect

http://dl.dropbox.com/u/391082/checkbox-ios.html

Replies(7)

rminde

Re: if and else

9 years ago

try this:

$('label').on('click', function(){
var xpos = parseInt($(this).css("backgroundPosition").split(" ")[0], 10);
if(xpos == -3){
alert("ON");
}else{
alert("OFF");
}
});

alano999

Re: if and else

9 years ago

Your question is unclear. Are you asking how to react to the change of state of a checkbox?

If so:-

$(document).ready(function () {
$("input#check").change(function () {
if ($(this).prop("checked")) {
//put your checked=true code here
} else {
//put your checked=false code here
}
});
});

The jQuery .change() event handler detects when a checkbox changes state.

The .prop("checked") method determines the boolean state of a checkbox

Is that what you needed to know?

Regards,

Alan

jqueryguy..

Re: if and else

9 years ago

hi guys, i will test.

but i am only need to do is: when click off(button) do something , and when click in on (do another thing)

like this button use only css3 so i will try the both things for see what happend.

thanks a lot.

alano999

Re: if and else

9 years ago

I think my solution provides what you need.

Within the if/else statement you can add/remove pseudo class names from other html elements, thus affecting the visual appearance.

For example, I have created this jsfiddle to show you what I mean.

In that example I have created two indicator lamps. Initially they each have a class of "lamp", specified using hard-coded html syntax. When the slider switch goes into the "on" position I have add a pseudo-class called "green" to one of the indicator elements, and a class called "red" to the other one.

When the switch is moved into the off position, my code removes the pseudo-classes from both indicator lamps.

I have defined some CSS styling for each lamp, matching the "green" and "red" pseudo-classes,

I hope my code helps you. When you know what you wish to achieve, post back on here and someone will help you.

Best wishes,

Alan

jqueryguy..

Re: Re: if and else

9 years ago

alano it is perfect thanks.

i tried use append and remove for id iOne and iTwo, but i have no sucess,

i wanna when click OFF appear the id=iOne and remove id=iTwo, and when click ON remove id=iOne and appear id=iTwo.

can you help with that?

thanks.

alano999

Re: if and else

9 years ago

I have created a new version here on jsfiddle. I believe button iFour does what you are asking?

In this version I have created an additional pseudo-class called "black", which does what it says (to simulate a lamp that is not lit up).

I have also changed the base definition of the "lamp" class so a lamp is initially invisible (like #iThree) when it has no pseudo-class.

To make a lamp completely invisible I have used CSS "visibility: hidden" so the page's block layout is not disrupted when lamps switch between visible and invisible (which would happen if you used .hide() and .show() with a relative positioning scheme).

I have added two more lamps for this example too, and applied different effects so you can see how to apply them.

Alan

alano999

Re: if and else

9 years ago

By the way. Instead of using if/else, you could theoretically just use the .toggleClass() method. I have not used it in my code, though, because I am paranoid about the possibility that a spurious "change" event would put the lamps out of sync with the switch position.

In my last code you could theoretically replace all of this:-

if ($(this).prop("checked")) {
$("#iOne").removeClass("black").addClass("green");
$("#iTwo").removeClass("black").addClass("red");
$("#iThree").addClass("green");
$("#iFour").removeClass("red").addClass("green");
} else {
$("#iOne").removeClass("green").addClass("black");
$("#iTwo").removeClass("red").addClass("black");
$("#iThree").removeClass("green");
$("#iFour").removeClass("green").addClass("red");
}

...with only this:-

$("#iOne").toggleClass("black green");
$("#iTwo").toggleClass("black red");
$("#iThree").toggleClass("green");
$("#iFour").toggleClass("red green");

But I would not recommend it... just in case things get out of step!

Top Reply

Response title

Attachments

jQuery Forum

if and else

Replies(7)

Re: if and else

Re: if and else

Re: if and else

Re: if and else

Re: Re: if and else

Re: if and else

Re: if and else

Statistics

Tags

Actions

Related Posts