2

Edit 1 (Sorry for the confusion)

$(this).hide();

will work for this particular id. But i think i coundnt put my query clearly. Although I got the answer, I have edited it now for future reference.

I have elements like this

<img src='images/star-transparent.png' id='star_transparent-1' width='30' height='30' class='star_transparent' />
<img src='images/star-transparent.png' id='star_transparent-2' width='30' height='30' class='star_transparent' />
<img src='images/star-blue.png' id='star_blue-1' width='30' height='30' class='star_blue' />
<img src='images/star-blue.png' id='star_blue-2' width='30' height='30' class='star_blue' />

and so on.. What I want is trigger onclick event to the class, and hide the transparent image which was clicked and show the colored one. My current jquery is -

$('.star_transparent').click(function() {
    var star_id = $(this).attr('id');
    $(this).hide();
    //how to write the 'id' with 'class' in the following line
    $('.star_blue').show();
});

In one similar question here, the proposed answer said to use something like -

$("#star_transparent-1.star_transparent");
or
$("#star_transparent-1 .star_transparent");

But, in my case star_transparent-1 or star_transparent-2 i.e. ID is itself a variable which is derived from class.click function. So how should I write that?

Also, in the above mentioned proposed answer, it was said that #star_transparent-1.star_transparent and #star_transparent-1 .star_transparent are two different things. it was quoted as -

The space is the descendant selector, i.e. A B means "Match all elements that match B which are a descendant of elements matching A". AB means "select all element that match A and B".

But, i am sorry to say, I didnt understand it. If anybody can explain it more easily, that would be a great help.

thanks. regards

Dr. Atul Tiwari

Community
  • 1
  • 1
Dr. Atul Tiwari
  • 1,085
  • 5
  • 22
  • 46

3 Answers3

0

There cannot be multiple elements with the same id in your code.

Vlas Bashynskyi
  • 1,886
  • 2
  • 16
  • 25
  • @DavidThomas The [spec](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-getElBId) clearly says "Behavior is not defined if more than one element has the same ID". – Ja͢ck Jul 03 '14 at 06:09
0

You can use keyword this itself to hide image which was clicked.

$('.star_transparent').click(function() {
    $(this).hide();
});

Selector using id:

$('.star_transparent').click(function() {
    var star_id = $(this).attr('id');
    $('#'+star_id+'.star_transparent').hide();
});
codingrose
  • 15,563
  • 11
  • 39
  • 58
  • 1
    The second one doesn't make any sense.. :\ – Rajaprabhu Aravindasamy Jul 03 '14 at 06:08
  • `$(this).hide();` is best, However as IDs must be unique you can simply use `$('#'+star_id).hide()` – Satpal Jul 03 '14 at 06:17
  • @RajaprabhuAravindasamy sorry for the confusion, but I needed the second one. – Dr. Atul Tiwari Jul 03 '14 at 06:17
  • @Dr.AtulTiwari, Why do you need second one As ID must be unique you can simply use `$('#'+star_id).hide()` there is no point using `'.star_transparent'` with ID selector. – Satpal Jul 03 '14 at 06:18
  • @Satpal sorry sir, actually i needed `$('#'+star_id+'.star_blue').show()`. and yes you are right `$(this).hide();` will alone work for `.star_transparent`. see my edited question. thanks. and yes i am splitting the `star_id` just to get the number 1 or 2, so that i can use it display the corresponding colored one. – Dr. Atul Tiwari Jul 03 '14 at 06:25
0

Since you have different ids you can easily use it to hide.

$('.star_transparent').click(function(evt) {

var star_id = $(evt.currentTarget).attr('id');
$('#' + star_id).hide();

});

Thanks

Madhu Magar
  • 435
  • 4
  • 18