从被点击的元素image src中放入image 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 class 隐藏点击的锚点，最后删除 class 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>

从被点击的元素image src中放入image src并更新数据

Put the image src from the clicked element image src and update data

html

javascript

css

jquery

toggle