Toggle between images using shorthand if

Question

There are 2 images and a variable.

var score = '0';
<div class="parent">
  <id ="trophy" src="imageTrophy.jpg" style="display:none"/>
  <id ="progressing" src="imageprogress1.jpg"/>
</div>

How write a if statement shorthand to toggle between these 2 images depending on the score?

score == 10 ? $('.parent').find('img').toggle() : $('.parent').find('img').toggle();

(score == '10') ? $('#win').show() $('score').hide() : $('#win').hide() $('score').show(); — Refilon, Dec 10 '15 at 09:22

score 1 · Accepted Answer · answered Dec 10 '15 at 09:22

1

Try,

$('.parent').find('img').hide().eq(score == 10 ? 0 : 1).show();

answered Dec 10 '15 at 09:22

Rajaprabhu Aravindasamy

66,513
17
101
130

Thanks. Looks good. Can you explain what `0 : 1` do? – Becky Dec 10 '15 at 09:29
that is index numbers like `.eq(0), .eq(1)`. – Jai Dec 10 '15 at 09:30
1

`.eq()` will act like fetching an element from an array. `.eq(0)` will fetch the first element. – Rajaprabhu Aravindasamy Dec 10 '15 at 09:31
`$('.parent').find('img').toggle(score == 10)` is it also? – Jai Dec 10 '15 at 09:35
@Jai But OP want to display single image all the time based on the score. It will either display both or hide the both. Right? – Rajaprabhu Aravindasamy Dec 10 '15 at 09:36
get it @RajaprabhuAravindasamy. – Jai Dec 10 '15 at 09:39

Satpal · Answer 2 · 2015-12-10T09:25:37.027

1

If you are willing to change HTML, Use single img element and set its src on the basis of condition.

<div class="parent">
  <img src="" />
</div>

Script, It will set the 'src' property of img based on score variable value.

var score = '0';
$('.parent img').prop('src' , function(){
    return score == 10 ? 'imageTrophy.jpg' : 'imageprogress1.jpg';
});

edited Dec 10 '15 at 09:25

answered Dec 10 '15 at 09:24

Satpal

132,252
13
159
168

Thanks and that's great. But I need to toggle loaded images. – Becky Dec 10 '15 at 09:25
@Becky, You may try `$('.parent').find('img:first').toggle(score == 10).end().find('img:last').toggle(score == 10)` – Satpal Dec 10 '15 at 09:30

Toggle between images using shorthand if

2 Answers2