我不知道如何解释这个,因为我是一个业余爱好者。
我有一个包含 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>
最佳答案
您可以将文本包装在 span
中,例如:
<span class="lang">EN</span>
并附加点击事件,然后在点击时将文本和图像复制到 .dropbtn
并使用 hide
类隐藏点击的 anchor ,最后删除类 hide
来自所有其他 anchor ,例如:
$(".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>
关于javascript - 从被点击的元素image src中放入image src并更新数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52541605/