jquery on click change class of list element Unicorn Meta Zoo #1: Why another podcast? Announcing the arrival of Valued Associate #679: Cesar Manara Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!jQuery.click() vs onClickIs there an “exists” function for jQuery?How do I detect a click outside an element?How do I check if an element is hidden in jQuery?How to change an element's class with JavaScript?Setting “checked” for a checkbox with jQuery?How to check whether a checkbox is checked in jQuery?How can I select an element with multiple classes in jQuery?How do I remove a particular element from an array in JavaScript?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
What is the term for a person whose job is to place products on shelves in stores?
Contradiction proof for inequality of P and NP?
How to use @AuraEnabled base class method in Lightning Component?
Why does the Cisco show run command not show the full version, while the show version command does?
How to keep bees out of canned beverages?
Map material from china not allowed to leave the country
Did the Roman Empire have penal colonies?
A faster way to compute the largest prime factor
Arriving in Atlanta after US Preclearance in Dublin. Will I go through TSA security in Atlanta to transfer to a connecting flight?
Mistake in years of experience in resume?
Does Mathematica have an implementation of the Poisson binomial distribution?
Multiple options vs single option UI
Could Neutrino technically as side-effect, incentivize centralization of the bitcoin network?
Is Bran literally the world's memory?
Check if a string is entirely made of the same substring
As an international instructor, should I openly talk about my accent?
The art of proof summarizing. Are there known rules, or is it a purely common sense matter?
Israeli soda type drink
Where did Arya get these scars?
Seek and ye shall find
Are all CP/M-80 implementations binary compatible?
Do I need to protect SFP ports and optics from dust/contaminants? If so, how?
finding a tangent line to a parabola
What is this word supposed to be?
jquery on click change class of list element
Unicorn Meta Zoo #1: Why another podcast?
Announcing the arrival of Valued Associate #679: Cesar Manara
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!jQuery.click() vs onClickIs there an “exists” function for jQuery?How do I detect a click outside an element?How do I check if an element is hidden in jQuery?How to change an element's class with JavaScript?Setting “checked” for a checkbox with jQuery?How to check whether a checkbox is checked in jQuery?How can I select an element with multiple classes in jQuery?How do I remove a particular element from an array in JavaScript?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
Here is my dynamically generated lists :
<ul class="config-swatch-list">
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
</ul>
and the js function:
function color_select()
$('#color').click(function()
if ($(this).hasClass('active'))
console.log('clicked');
$(this).removeClass('active');
else
$(this).addClass('active');
);
My problem is using this code when I clicked 1st li
element, this js function add a active
class successfully . But this does not work for 2nd, or 4th li
element (printing clicked
in console).So the codes only working for 1st, 3rd , and 5th li
elements. If I double click 2nd or 4th li
element then the code working as expected.
All I want to do is after a click change a single li
element css class to active
or remove active
class if there is already existing active
class.
javascript jquery
add a comment |
Here is my dynamically generated lists :
<ul class="config-swatch-list">
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
</ul>
and the js function:
function color_select()
$('#color').click(function()
if ($(this).hasClass('active'))
console.log('clicked');
$(this).removeClass('active');
else
$(this).addClass('active');
);
My problem is using this code when I clicked 1st li
element, this js function add a active
class successfully . But this does not work for 2nd, or 4th li
element (printing clicked
in console).So the codes only working for 1st, 3rd , and 5th li
elements. If I double click 2nd or 4th li
element then the code working as expected.
All I want to do is after a click change a single li
element css class to active
or remove active
class if there is already existing active
class.
javascript jquery
add a comment |
Here is my dynamically generated lists :
<ul class="config-swatch-list">
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
</ul>
and the js function:
function color_select()
$('#color').click(function()
if ($(this).hasClass('active'))
console.log('clicked');
$(this).removeClass('active');
else
$(this).addClass('active');
);
My problem is using this code when I clicked 1st li
element, this js function add a active
class successfully . But this does not work for 2nd, or 4th li
element (printing clicked
in console).So the codes only working for 1st, 3rd , and 5th li
elements. If I double click 2nd or 4th li
element then the code working as expected.
All I want to do is after a click change a single li
element css class to active
or remove active
class if there is already existing active
class.
javascript jquery
Here is my dynamically generated lists :
<ul class="config-swatch-list">
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
<li class='color' onclick="color_select();">
<a href="#" style="background-color: random_val"></a>
</li>
</ul>
and the js function:
function color_select()
$('#color').click(function()
if ($(this).hasClass('active'))
console.log('clicked');
$(this).removeClass('active');
else
$(this).addClass('active');
);
My problem is using this code when I clicked 1st li
element, this js function add a active
class successfully . But this does not work for 2nd, or 4th li
element (printing clicked
in console).So the codes only working for 1st, 3rd , and 5th li
elements. If I double click 2nd or 4th li
element then the code working as expected.
All I want to do is after a click change a single li
element css class to active
or remove active
class if there is already existing active
class.
javascript jquery
javascript jquery
asked Mar 9 at 6:30
pyprismpyprism
1,44553355
1,44553355
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Remove onclick
attributes from <a>
. And don't wrap click
inside other function. And also use .color
instead of #color
`
$('.color').click(function()
if ($(this).hasClass('active'))
console.log('clicked');
$(this).removeClass('active');
else
$(this).addClass('active');
);
.active
color:orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color'>
<a href="#" style="background-color: random_val">one</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">two</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">three</a>
</li>
<li class='color' >
<a href="#" style="background-color: random_val">four</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">five</a>
</li>
</ul>
add a comment |
jQuery.click() vs onClick .. you can still use onclick
.. and use toggleClass()
for active
class instead of add/removeClass
function color_select(el)
$('.color').removeClass('active').filter(el).toggleClass('active'); // remove active class from the li's and toggle the class for the clicked element
.active
color : red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 1</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 2</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 3</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 4</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 5</a>
</li>
</ul>
But to be honest personally I don't prefer to use onclick=
using a .click
which presented by @Maheer answer is for me much much better
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55074682%2fjquery-on-click-change-class-of-list-element%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Remove onclick
attributes from <a>
. And don't wrap click
inside other function. And also use .color
instead of #color
`
$('.color').click(function()
if ($(this).hasClass('active'))
console.log('clicked');
$(this).removeClass('active');
else
$(this).addClass('active');
);
.active
color:orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color'>
<a href="#" style="background-color: random_val">one</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">two</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">three</a>
</li>
<li class='color' >
<a href="#" style="background-color: random_val">four</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">five</a>
</li>
</ul>
add a comment |
Remove onclick
attributes from <a>
. And don't wrap click
inside other function. And also use .color
instead of #color
`
$('.color').click(function()
if ($(this).hasClass('active'))
console.log('clicked');
$(this).removeClass('active');
else
$(this).addClass('active');
);
.active
color:orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color'>
<a href="#" style="background-color: random_val">one</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">two</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">three</a>
</li>
<li class='color' >
<a href="#" style="background-color: random_val">four</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">five</a>
</li>
</ul>
add a comment |
Remove onclick
attributes from <a>
. And don't wrap click
inside other function. And also use .color
instead of #color
`
$('.color').click(function()
if ($(this).hasClass('active'))
console.log('clicked');
$(this).removeClass('active');
else
$(this).addClass('active');
);
.active
color:orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color'>
<a href="#" style="background-color: random_val">one</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">two</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">three</a>
</li>
<li class='color' >
<a href="#" style="background-color: random_val">four</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">five</a>
</li>
</ul>
Remove onclick
attributes from <a>
. And don't wrap click
inside other function. And also use .color
instead of #color
`
$('.color').click(function()
if ($(this).hasClass('active'))
console.log('clicked');
$(this).removeClass('active');
else
$(this).addClass('active');
);
.active
color:orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color'>
<a href="#" style="background-color: random_val">one</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">two</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">three</a>
</li>
<li class='color' >
<a href="#" style="background-color: random_val">four</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">five</a>
</li>
</ul>
$('.color').click(function()
if ($(this).hasClass('active'))
console.log('clicked');
$(this).removeClass('active');
else
$(this).addClass('active');
);
.active
color:orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color'>
<a href="#" style="background-color: random_val">one</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">two</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">three</a>
</li>
<li class='color' >
<a href="#" style="background-color: random_val">four</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">five</a>
</li>
</ul>
$('.color').click(function()
if ($(this).hasClass('active'))
console.log('clicked');
$(this).removeClass('active');
else
$(this).addClass('active');
);
.active
color:orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color'>
<a href="#" style="background-color: random_val">one</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">two</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">three</a>
</li>
<li class='color' >
<a href="#" style="background-color: random_val">four</a>
</li>
<li class='color'>
<a href="#" style="background-color: random_val">five</a>
</li>
</ul>
edited Mar 9 at 6:45
answered Mar 9 at 6:34
Maheer AliMaheer Ali
12.7k1330
12.7k1330
add a comment |
add a comment |
jQuery.click() vs onClick .. you can still use onclick
.. and use toggleClass()
for active
class instead of add/removeClass
function color_select(el)
$('.color').removeClass('active').filter(el).toggleClass('active'); // remove active class from the li's and toggle the class for the clicked element
.active
color : red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 1</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 2</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 3</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 4</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 5</a>
</li>
</ul>
But to be honest personally I don't prefer to use onclick=
using a .click
which presented by @Maheer answer is for me much much better
add a comment |
jQuery.click() vs onClick .. you can still use onclick
.. and use toggleClass()
for active
class instead of add/removeClass
function color_select(el)
$('.color').removeClass('active').filter(el).toggleClass('active'); // remove active class from the li's and toggle the class for the clicked element
.active
color : red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 1</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 2</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 3</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 4</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 5</a>
</li>
</ul>
But to be honest personally I don't prefer to use onclick=
using a .click
which presented by @Maheer answer is for me much much better
add a comment |
jQuery.click() vs onClick .. you can still use onclick
.. and use toggleClass()
for active
class instead of add/removeClass
function color_select(el)
$('.color').removeClass('active').filter(el).toggleClass('active'); // remove active class from the li's and toggle the class for the clicked element
.active
color : red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 1</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 2</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 3</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 4</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 5</a>
</li>
</ul>
But to be honest personally I don't prefer to use onclick=
using a .click
which presented by @Maheer answer is for me much much better
jQuery.click() vs onClick .. you can still use onclick
.. and use toggleClass()
for active
class instead of add/removeClass
function color_select(el)
$('.color').removeClass('active').filter(el).toggleClass('active'); // remove active class from the li's and toggle the class for the clicked element
.active
color : red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 1</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 2</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 3</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 4</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 5</a>
</li>
</ul>
But to be honest personally I don't prefer to use onclick=
using a .click
which presented by @Maheer answer is for me much much better
function color_select(el)
$('.color').removeClass('active').filter(el).toggleClass('active'); // remove active class from the li's and toggle the class for the clicked element
.active
color : red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 1</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 2</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 3</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 4</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 5</a>
</li>
</ul>
function color_select(el)
$('.color').removeClass('active').filter(el).toggleClass('active'); // remove active class from the li's and toggle the class for the clicked element
.active
color : red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 1</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 2</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 3</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 4</a>
</li>
<li class='color' onclick="color_select(this);">
<a href="#" style="background-color: random_val">Link 5</a>
</li>
</ul>
edited Mar 9 at 6:52
answered Mar 9 at 6:43
Mohamed-YousefMohamed-Yousef
19.9k31224
19.9k31224
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55074682%2fjquery-on-click-change-class-of-list-element%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown