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>

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

3 个答案: