从点击的元素图像src中放入图像src并更新数据

Question

我不知道如何解释，因为我是业余爱好者。

我有一个包含 6 种语言的语言菜单：Es, Br, Fr, It, De, En

所以，我选择了默认语言 EN，并在下拉菜单中显示了其余图像。

问题是：当我点击它时如何更新文本和图像（例如）。

我的结构是这样的：

$(".dropbtn, .burger").click(function() {
  $(this).next(".dropdown-content, .items").stop().slideToggle(500);
  //$(this).find(".arrow-up, .arrow-down").toggle();
});

// If you click outside dropdown - close dropdown
var $menu = $('.dropdown');
$(document).mouseup(function(e) {
  if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
    $('.dropdown-content').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="dropbtn">
  <img src="assets/img/languages/flag_en.png" alt=""> EN
  <span class="ico ico-pointer_down"></span>
</a>
<div class="dropdown-content" id="dd-content">
  <a href="#"><img src="assets/img/languages/flag_br.png" alt=""> PT</a>
  <a href="#"><img src="assets/img/languages/flag_es.png" alt=""> ES</a>
  <a href="#"><img src="assets/img/languages/flag_fr.png" alt=""> FR</a>
  <a href="#"><img src="assets/img/languages/flag_de.png" alt=""> DE</a>
  <a href="#"><img src="assets/img/languages/flag_it.png" alt=""> IT</a>
</div>

Answer 1

首先，您需要一个click 事件处理程序来处理您的图像。 您已经在使用 click 事件处理程序。

$(".dropdown-content img").click(function (e) {});

在您的事件处理程序中，您需要定义要做什么。 您的任务是更改src 属性。 所以你首先需要做的就是将属性保存在一个变量中。

var src = $(this).attr("src");

那你需要改变你要改变的图片的属性。

$(".dropbtn").attr("src", src); //<-- the first parameter defines the attribute you want to change.
//The second attribute is our variable we set earlier.

最后应该是这样的：

$(".dropdown-content img").click(function (e) {
   var src = $(this).attr("src"); //<-- getting the attribute of the clicked element (this)
   $(".dropbtn").attr("src", src); //<-- changing the attribute.
});

有很多指南可以帮助您。

但是，这不是内部化的最佳实践，但可能有助于学习一些基本的 JQuery 和 JS 规则。

Answer 2

您可以将文本包装在 span 中，例如：

<span class="lang">EN</span>

并附加点击事件，然后在点击时将文本和图像复制到.dropbtn 并使用hide 类隐藏点击的锚点，最后从所有其他锚点中删除hide 类，例如：

$(".dropbtn").click(function() {
  $(this).next(".dropdown-content, .items").stop().slideToggle(500);
});

// If you click outside dropdown - close dropdown
var $menu = $('.dropdown');
$(document).mouseup(function(e) {
  if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
    $('.dropdown-content').hide();
  }
});

$("#dd-content a").click(function() {
  var text = $(this).text();
  var img = $(this).find('img').clone(true);

  $('.dropbtn .lang').text(text);
  $('.dropbtn img').replaceWith(img);

  $("#dd-content a").removeClass('hide');
  $(this).addClass('hide');
});

a.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="javascript:void(0)" class="dropbtn">
  <img src="assets/img/languages/flag_en.png" alt=""><span class="lang">EN</span>
  <span class="ico ico-pointer_down"></span>
</a>

<div class="dropdown-content" id="dd-content">
  <a href="#" class="hide"><img src="assets/img/languages/flag_en.png" alt=""> EN</a>
  <a href="#"><img src="assets/img/languages/flag_br.png" alt=""> PT</a>
  <a href="#"><img src="assets/img/languages/flag_es.png" alt=""> ES</a>
  <a href="#"><img src="assets/img/languages/flag_fr.png" alt=""> FR</a>
  <a href="#"><img src="assets/img/languages/flag_de.png" alt=""> DE</a>
  <a href="#"><img src="assets/img/languages/flag_it.png" alt=""> IT</a>
</div>

Answer 3

我会将国家/地区名称包装在 span 中。然后，当您单击语言选项时，将图像 src 和文本换成所选语言。

我添加了一些 css 来帮助说明图像 src 的变化。

$(".dropbtn, .burger").click(function(e) {
  e.preventDefault();
  $(this).next(".dropdown-content, .items").stop().slideToggle(500);
  //$(this).find(".arrow-up, .arrow-down").toggle();
});

// If you click outside dropdown - close dropdown
var $menu = $('.dropdown');
$(document).mouseup(function(e) {
  if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
    $('.dropdown-content').hide();
  }
});

var $lang = $('.dropbtn');
//when user clicks on language
$('.dropdown-content').on('click', 'a', function(e) {
  e.preventDefault();
  var $this = $(this),
    $img = $this.find('img');
  //set the image of .dropbtn to the chosen image
  $lang.find('img').attr('src', $img.attr('src'));
  //set the name of the language
  $lang.find('.lang-name').text($this.text());
});

<!-- added to help visualise the image src attribute changing. Can be safely ignored. -->
.dropbtn img:after {
  content: attr(src);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="dropbtn">
  <img src="assets/img/languages/flag_en.png" alt=""> <span class="lang-name">EN</span>
  <span class="ico ico-pointer_down"></span>
</a>
<div class="dropdown-content" id="dd-content">
  <a href="#"><img src="assets/img/languages/flag_br.png" alt=""> PT</a>
  <a href="#"><img src="assets/img/languages/flag_es.png" alt=""> ES</a>
  <a href="#"><img src="assets/img/languages/flag_fr.png" alt=""> FR</a>
  <a href="#"><img src="assets/img/languages/flag_de.png" alt=""> DE</a>
  <a href="#"><img src="assets/img/languages/flag_it.png" alt=""> IT</a>
</div>