1

我有以下代码

<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>

与“chosenflag”类的链接是活动标志，它选择一个 php 变量，它可以是 uk、de、es、fr、it。

我想要发生的事情是以某种方式将 img src 从 ul 列表中获取到所选标志 img src，具体取决于 data-flag 属性。

有人可以帮助我吗？

4

2 回答 2

1

要获得选择的标志，请执行

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

要获得具有特定的列表元素中src的图像，请执行adata-flag

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

示范

于 2012-11-07T12:54:12.933 回答
1

如果您单击其中一个标志，这应该可以工作。它应该将其标志图像放在所选的标志图像位置。

$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);
});

我想这就是你要找的。

于 2012-11-07T13:03:41.383 回答