CODEWITHSUNDEEP
jqueryhtml
Frank Groot
Frank Groot

Reputation: 570

Show image if div is clicked

I'm trying to show an image when a div is clicked.

The first one is working but the second one isn't.

What I've tried so far, but it didn't work:

$('#review').click(function() {
  var src = $('#review').attr('src');
  $('#result').attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="review" src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center skew-15deg ro-buttons">
<p class="noskew-15deg text-center">John Doe</p>
</div>

<div id="review" src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center skew-15deg ro-buttons">
<p class="noskew-15deg text-center">Doe John</p>
</div>

<img id="result" />

Upvotes: 0

Views: 76

Answers (4)

Prashant Shirke
Prashant Shirke

Reputation: 1423

Id should be unique, but by any reason if you can't change it,then you can use attribute selector like below as id selector returns first matching element!

$("[id='review']").click(function() {
  var src = $(this).attr('src');
  $('#result').attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="review" src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center skew-15deg ro-buttons">
<p class="noskew-15deg text-center">John Doe</p>
</div>

<div id="review" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Small-world-network-example.png/220px-Small-world-network-example.png" class="background-markup-center skew-15deg ro-buttons">
<p class="noskew-15deg text-center">Doe John</p>
</div>

<img id="result" />

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

An Id should be unique, use class to select by in this case

$('.review').click(function() {
  var src = $(this).attr('src');
  $('#result').attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center review skew-15deg ro-buttons">
<p class="noskew-15deg text-center">John Doe</p>
</div>

<div src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg" class="background-markup-center review skew-15deg ro-buttons">
<p class="noskew-15deg text-center">Doe John</p>
</div>

<img id="result" />

Upvotes: 0

guradio
guradio

Reputation: 15555

$('.review').click(function() {
  var src = $(this).attr('src');
  $('#result').attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="review" src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center skew-15deg ro-buttons">
<p class="noskew-15deg text-center">John Doe</p>
</div>

<div class="review" src="ad">
<p class="noskew-15deg text-center">Doe John</p>
</div>

<img id="result" />

  1. Use class Id should be unique
  2. use this context to refer to click element

Upvotes: 2

athi
athi

Reputation: 1683

id = name [CS] This attribute assigns a name to an element. This name must be unique in a document.

You have used id="review" for two elements. It is not possible.

Used this selector in the function. Otherwise the first element with the class will be used.

$('.review').click(function() {
  var src = $(this).attr('src');
  $('#result').attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="review" src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center skew-15deg ro-buttons">
  <p class="noskew-15deg text-center">John Doe</p>
</div>

<div class="review" src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center skew-15deg ro-buttons">
  <p class="noskew-15deg text-center">Doe John</p>
</div>

<img id="result" />

Upvotes: 2

Related Questions