is there a better way to write this javascript / jquery?

Question

is there a better way to write this simple on click script?

as you can she there is a consistent number in each block. instead of duplicating it another 10 times for 10 different list item, is there a better way?

the content is not in a child of the li. so i cant club all of them with (this)

heres the thing im working on:

$( '.artist_li1' ).click(function() {
    $( '.artist_content' ).removeClass( "active" );
    $( '.artist_content1' ).addClass( "active" );
}); 

$( '.artist_li2' ).click(function() {
    $( '.artist_content' ).removeClass( "active" );
    $( '.artist_content2' ).addClass( "active" );
}); 

$( '.artist_li3' ).click(function() {
    $( '.artist_content' ).removeClass( "active" );
    $( '.artist_content3' ).addClass.addClass( "active" );
}); 


and so on....

You can just club onclick together `$('.artlist_li1, .artist_li2').click` — tewathia, Dec 11 '16 at 14:44
It would help if you posted the HTML for the 3 example cases you have. — user3094755, Dec 11 '16 at 14:44

Saumya Rastogi · Answer 1 · 2016-12-11T15:04:24.930

2

You can use ^ attribute selector in jQuery like this:

$( '[class^=artist_li]' ).click(function() {
    $( '.artist_content' ).removeClass( "active" );
    $( '.artist_content1' ).addClass( "active" );
});

[class^=artist_li] matches elements with class attribute starting with artist_li

UPDATE: Use jQuery instead of $ as according to your provided link, you're using jQuery v 1.12

For more help, see code block below

$(function(){

  $("[class^=artist_li]").on('click', function() {
    alert($(this).text());
  });

});

li {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li class="artist_li1">Click 1</li>
    <li class="artist_li2">Click 2</li>
    <li class="artist_li3">Click 3</li>
    <li class="artist_li4">Click 4</li>
  </ul>
</div>

Hope this helps!

edited Dec 11 '16 at 15:04

answered Dec 11 '16 at 14:42

Saumya Rastogi

13,159
5
42
45

what about .artist_content1 ? how can make the number increase? – wsgg Dec 11 '16 at 14:46
You don't need to add numbers in the selector, the jquery will automatically grab them, as - `[class^=artist_li]` matches elements with class attribute starting with `artist_li` – Saumya Rastogi Dec 11 '16 at 14:47
hmm i tried. this and it didnt work. see url i added in the post – wsgg Dec 11 '16 at 14:58
Hmmm, don't use `$` as you're using jQuery v 1.12, use `jQuery` instead of `$`. I've tried it, its working! - `jQuery("[class=^artist_li]").on(` – Saumya Rastogi Dec 11 '16 at 15:01

score 1 · Accepted Answer · edited Dec 11 '16 at 15:27

1

You can do for loop:

for(var i = 1; i < 3; i++) {
    (function(index) {
        $( '.artist_li'+index ).click(function() {
            $( '.artist_content' ).removeClass( "active" );
            $( '.artist_content'+index ).addClass( "active" );
        });
    }(i));

}

edited Dec 11 '16 at 15:27

wsgg

934
1
20
43

answered Dec 11 '16 at 14:45

Youssef

1,033
8
16

thanks. i tried this. it only works for the first click. subsequent clicks doesnt do anything or return any error in console... – wsgg Dec 11 '16 at 14:50
Classic error of closure inside a loop. See [here](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example): you need to add an IIFE inside the loop to "fix" the iterator value. – Amadan Dec 11 '16 at 15:08

Adjit · Answer 3 · 2016-12-11T15:01:00.853

To give a better / more efficient answer it would be helpful to see your HTML. But I digress, and will suggest the following -

Assuming some HTML structure as follows - You can remove the need for indexing if you work using DOM traversal relative to the clicked element

$(document).on('click', '.artist_li', function(){
  $('.artist_content').removeClass('active');
  
  //this will find the child div inside the list element that
  //was just clicked. Removing the need for indexing
  $(this).children('.artist_content').addClass('active');
});

.active {
  color: red;
}

li {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> <!-- Adding extra class artist_li to illustrate various method -->
  <li class="artist_li1 artist_li">
    <div class="artist_content artist_content1 active">Content 1</div>
  </li>
  <li class="artist_li1 artist_li">
    <div class="artist_content artist_content2">Content 2</div>
  </li>
  <li class="artist_li1 artist_li">
    <div class="artist_content artist_content3">Content 3</div>
  </li>
</ul>

@wsgg didn't need it anyway for my suggestion – Adjit Dec 11 '16 at 15:03 — Adjit, Dec 11 '16 at 15:03

is there a better way to write this javascript / jquery?

3 Answers3