I have a simple code that switches text when an image is clicked:
js:
JavaScript
x
23
23
1
$(document).ready(function() {
2
$('.srb').on('click', function() {
3
var r = $('.localization').each(function() {
4
var el = $(this);
5
var key = (el.attr('caption'));
6
el.text(srb[key]);
7
});
8
});
9
$('.eng').on('click', function() {
10
var r = $('.localization').each(function() {
11
var el = $(this);
12
var key = (el.attr('caption'));
13
el.text(eng[key]);
14
});
15
});
16
var srb = {
17
welcome: 'Добро дошли на наш сајт!'
18
};
19
var eng = {
20
welcome: 'Welcome to our site!'
21
};
22
});
23
HTML:
JavaScript
1
4
1
<span class='localization' caption='welcome'>Welcome to our site!</span>
2
<img src="img/Serbia.png" value='srb' class="srb" id="flag"/>
3
<img src="img/United-Kingdom.png" class='eng' value='eng'/>
4
Is it possible to switch images when language is switched (for example, when English language is set, GB flag disappears)?
Advertisement
Answer
Edit html like that
JavaScript
1
3
1
<img src="img/Serbia.png" value='srb' class="image_flag srb" id="flag"/>
2
<img src="img/United-Kingdom.png" class="image_flag eng" value="eng"/>
3
add class hidden element
JavaScript
1
4
1
.d-none{
2
display: none !important;
3
}
4
JavaScript
1
9
1
<script>
2
function activeImageFlag(flagActive){
3
document.querySelectorAll(".image_flag").forEach(function(flagImage){
4
flagImage.classList.add('d-none')
5
});
6
document.querySelector(".image_flag." + flagActive).classList.remove('d-none')
7
}
8
</script>
9