Поместите изображение src из кликаемого элемента image src и обновите данные - PullRequest
Новая
       12

Поместите изображение src из кликаемого элемента image src и обновите данные

0 голосов
/ 27 сентября 2018

Я не знаю, как это объяснить, потому что я любитель.

У меня есть языковое меню с 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>

Ответы [ 3 ]

0 голосов
/ 27 сентября 2018

Вы можете обернуть текст в 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>
0 голосов
/ 27 сентября 2018

Я бы обернул название страны в span.Затем, когда вы щелкнете по языковым опциям, поменяйте местами изображение src и текст для выбранного языка.

Я добавил немного CSS, чтобы проиллюстрировать изменение исходного изображения. 

$(".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>
0 голосов
/ 27 сентября 2018

Прежде всего вам нужен обработчик событий 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.

InВ конце концов, это должно выглядеть так: 

$(".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.

...