jquery getting attributes

Question

I have the following code

<a href="#" class="chosenflag" data-flag="<?php echo $lang;?>"><img class="flag" src="/img/flag/United Kingdom.png" alt="" /></a>

<ul class="choices">
<li><a href="#" data-flag="uk"><img class="flag" src="/img/flag/United Kingdom.png" alt="" /></a></li>
<li><a href="#" data-flag="de"><img class="flag" src="/img/flag/Germany.png" alt="" /></a></li>
<li><a href="#" data-flag="es"><img class="flag" src="/img/flag/Spain.png" alt="" /></a></li>
<li><a href="#" data-flag="fr"><img class="flag" src="/img/flag/France.png" alt="" /></a></li>
<li><a href="#" data-flag="it"><img class="flag" src="/img/flag/Italy.png" alt="" /></a></li>
</ul>

The link with the class 'chosenflag' is the active flag which picks up a php variable which will either be uk, de, es, fr, it.

What I would like to happen is somehow get the img src from the ul list to the chosen flag img src depending on the data-flag attribute.

Would someone be able to help me out?

mraaroncruz · Accepted Answer · 2012-11-07 13:03:41Z

1

This should work if you click on one of the flags. It should put its flag image in the chosen flag image spot.

$chosen = $('.chosenflag')
$('.choices').on('click', 'a', function () {
  // changes data-flag on .chosenflag
  var dataFlag = this.data('flag');
  $chosen.data('flag', dataFlag);
  // 'this' is the clicked on <a>
  var src = this.find('img').attr('src');
  $chosenImg = $chosen.find('img');
  $chosenImg.attr('src', src);
});

I think this is what you are looking for.

answered Nov 7, 2012 at 13:03

mraaroncruz

3,8092 gold badges34 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Denys Séguret · Accepted Answer · 2012-11-07 12:59:25Z

1

To get the choosen flag, do

var flag = $('a.chosenflag').data('flag');

To get the src of the image in a a element of your list having a certain data-flag, do

var src = $('ul a[data-flag='+flag+'] img').attr('src');

Demonstration

edited Nov 7, 2012 at 12:59

answered Nov 7, 2012 at 12:54

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Collectives™ on Stack Overflow

jquery getting attributes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related