jQuery - Is it possible to formulate id using javascript

Question

I've been working on a fadein fadeout image slideshow. I've used hoverizr to take advantage of the greyscale effect. Catch is, when the image is on the current slide, thumb should be colored image.

Based on the given scenario, I've been trying to add/remove classes after every slide. I have successfully added the greyscale class on all images but wasn't able to remove the greyscale on the current image.

Question is, is it possible to pass element ID using javascript then retrieve it in jQuery? Code Sample Below:

 <script>
 function updateThumbs(element_id){
      var elem = element_id;
      $('#slide a img').addClass('greyScale')
      $('#' + elem).removeClass('greyScale');
 }
 </script>
 <div id="slide">
      <a onClick="updateThumbs('image_1');">
        <img src="..." id="image_1" class="greyScale">
      </a>
      <a onClick="updateThumbs('image_2');">
        <img src="..." id="image_2" class="greyScale">
      </a>
 </div>

you might have to use `attribute` http://stackoverflow.com/questions/1657702/addid-in-jquery — t q, Aug 22 '12 at 18:07
Yes, it is possible. Did you try it? Are you having a specific problem with it that's not working? — Richard Marskell - Drackir, Aug 22 '12 at 18:08

score 1 · Answer 1 · answered Aug 22 '12 at 18:27

Yes, you can use jQuery in this manor. However, I would wire up events in document.ready instead of the html. And you can put the click event on the image instead of the anchor.

$(document).ready(function() {
    $("#slide img").click(function () {
        $('#slide img').addClass('greyScale');
        $(this).removeClass('greyScale');
    });
});

Complete example at jsFiddle

Also notice the missing semi-colon in your addClass() statement.

jQuery - Is it possible to formulate id using javascript

1 Answers1