CODEWITHSUNDEEP
javascriptjquery
Tukhsanov
Tukhsanov

Reputation: 303

jQuery clicking some problems

I wanted to click on li element and stay the same as hover element. here is my code JSFIDDLE

jQuery

$('ul > li').on('click', function(){
    $(this).css({
        border:2px solid #fff;
        height:22px;
        width:22px;
        transition: all 0.2s linear;
    })
})

Upvotes: 0

Views: 49

Answers (5)

PaintyJoy
PaintyJoy

Reputation: 116

the property value should be in the quotes like

border: "2px solid #fff"

because the arguments passed to the css method is an object , and properties ,which are also items in object, should be seperated by ,

so it finally shoul be

$(this).css({
    border:"2px solid #fff",
    height:"22px",
    width:"22px",
    transition: "all 0.2s linear"
})

I usually pre-defined a class

.test{
    border:"2px solid #fff",
    height:"22px",
    width:"22px",
    transition: "all 0.2s linear"
}

and add it to the elemnt when event triggered

$(this).addClass("test");

in this way you can easily remove it just by

$(this).removeClass("test");

Upvotes: 1

Konsole
Konsole

Reputation: 3475

Add a unique class to the li on click

CSS

ul > li:hover, .hoverState{
    border:2px solid #fff;
    height:22px;
    width:22px;
    transition: all 0.08s linear;
}

JS

$('ul > li').on('click', function(){
    //remove hoverState class from other element if any
    $('ul > li').removeClass('hoverState');

    //add hoverState class to the clicked element
    $(this).addClass('hoverState');
})

Here is the FIDDLE

Upvotes: 4

KBN
KBN

Reputation: 2974

This is a much better solution according to me, than adding inline styles.

JS: 

$('ul > li').on('click', function(){
    $(this).addClass("clicked");
})

CSS:

ul > li:hover, ul > li.clicked{
    border:2px solid #fff;
    height:22px;
    width:22px;
    transition: all 0.08s linear;
}

Upvotes: 1

Jesse
Jesse

Reputation: 2830

While you are missing the $ in the css, I believe you want the circle to stay filled if you click it

Fiddle -> http://jsfiddle.net/2dGn4/1/

$('ul > li').on('click', function(){
    $(this).css({
        border: "2px solid #fff",
        height: "22px",
        width: "22px",
        transition: "all 0.2s linear"
    })
})

If you want it to toggle back after clicking you would just detect the width or height, etc, and reverse the css attributes.

Hope this helps

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59232

You are missing $ in (this).css

It should be like this:

$('ul > li').on('click', function(){
    $(this).css({
        border:'2px solid #fff',
        height:'22px',
        width:'22px',
        transition: 'all 0.2s linear'
    })
})

and also wrap the values within quotes and use , to separate the values.

Demo

Upvotes: 0

Related Questions