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

Question

I don't know how to explain this because I am an amateur.

I have a language menu with 6 languages: Es, Br, Fr, It, De, En

So, I have the default language selected EN and a dropdown with the rest of the images.

The question is: how can I update the text and the image when I click on It (for example).

My structure is like this:

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

are you using any libraries for the dropdown? If not then why are you not using — karthick, Sep 27 '18 at 16:46
For details on how to implement internationalization see https://stackoverflow.com/questions/3084675/how-does-internationalization-work-in-javascript — Kay, Sep 27 '18 at 16:47
@Kay The op's question is different from the link that you have posted. — karthick, Sep 27 '18 at 16:48

Zakaria Acharki · Accepted Answer · 2018-09-28T08:53:22.967

1

You could wrap the text in the span like :

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

And attach click event then on click copy the text and image to the .dropbtn and hide the clicked anchor using hide class and finally remove the class hide from all the other anchors, like :

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

edited Sep 28 '18 at 08:53

answered Sep 27 '18 at 16:52

Zakaria Acharki

66,747
15
75
101

Is this what you're looking for ? – Zakaria Acharki Sep 27 '18 at 16:58
more or less. first, thank you. second: If I click on dropdown option (FR) the span.lang update but the image from dropdown option disappear. I don't want this – Stefan Iordache Sep 28 '18 at 07:51
Very awesome, one last thing. Can I make it to close after I click one of the options and make a cookie to keep my selection after refresh ? Thank you – Stefan Iordache Sep 28 '18 at 09:25
_Can I make it to close after I click one of the options_ It looks like it already does – Zakaria Acharki Sep 28 '18 at 09:32
1

_and make a cookie to keep my selection after refresh ?_ yes that possible you could try it and I will be here if you stuck... give it a try – Zakaria Acharki Sep 28 '18 at 09:32
https://codeshare.io/5D3wAE i've made this but dont work after refresh .. still got old language – Stefan Iordache Sep 28 '18 at 11:18
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/180934/discussion-between-stefan-iordache-and-zakaria-acharki). – Stefan Iordache Sep 28 '18 at 11:22
Hi are you there ? – Zakaria Acharki Sep 28 '18 at 15:19
codeshare.io/5D3wAE i've made this but dont work after refresh .. still got old language – Stefan Iordache Sep 28 '18 at 15:44
Yes I saw it and fixed it, just create new question and I'll answer it to keep things arranged. – Zakaria Acharki Sep 28 '18 at 15:46
https://stackoverflow.com/questions/52577528/i-want-to-put-a-cookie-on-click-to-keep-my-selection-active-after-the-page-refre/52578015#52578015 – Stefan Iordache Oct 01 '18 at 11:46

score 0 · Answer 2 · answered Sep 27 '18 at 16:52

First of all you need a click event-handler for your images. You are using a click event-handler already.

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

Inside your event-handler you need to define what to do. Your mission is to change the src attribute. So what you need to do first is to save the attribute in a variable.

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

Then you need to change the attribute of the image you want to change.

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

In the end, it should look like this:

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

There are a lot of guides out there that can help you out.

However, this is not best practise for internalization but might be good to learn some basic JQuery and JS rules.

score 0 · Answer 3 · answered Sep 27 '18 at 17:06

I would wrap the country name in a span. Then, when you click on the language options, swap out the image src and text for the chosen language.

I have added a little css to help illustrate the image src changing.

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

this is not what I need. This only change the image but its incomplete. thanks — Stefan Iordache, Sep 28 '18 at 07:53

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

3 Answers3