在JavaScript按钮上显示所选文本

Question

我一直在搜索互联网，但在这个问题上找不到合适的答案。如何修复显示所选文本的JavaScript按钮。例如，当我点击德国时。此按钮的文本将更改为语言：德国。查看下面的照片和代码，以便更好地了解此问题。

＆＃13;

＆＃13;

$(function() {
$("button").click(function(){
	$(".choose").toggle();
	});
});

＆＃13;

<button type="button"><img src="Img/global logo.png" width="16" height="16" alt=""> Language:</button>
<div class="choose">
<br>
<p>
This changes the language of the site.</p>
<hr>
<div class="language">
<ul class="country">
<li data-type="Brazil"><img src="Img/Flags-Icon-Set/24x24/BR.png" width="22" height="22" alt=""/> Brazil</li>
<li data-type="China"><img src="Img/Flags-Icon-Set/24x24/CN.png" width="22" height="22" alt=""/> China</li>
<li data-type="France"><img src="Img/Flags-Icon-Set/24x24/FR.png" width="22" height="22" alt=""/> France</li>
<li data-type="Germany"><img src="Img/Flags-Icon-Set/24x24/DE.png" width="22" height="22" alt=""/> Germany</li>
<li data-type="Hong Kong"><img src="Img/Flags-Icon-Set/24x24/HK.png" width="22" height="22" alt=""/> Hong Kong</li>
<li data-type="India"><img src="Img/Flags-Icon-Set/24x24/IN.png" width="22" height="22" alt=""/> India</li>
<li data-type="Indonesia"><img src="Img/Flags-Icon-Set/24x24/ID.png" width="22" height="22" alt=""/> Indonesia</li>
<li data-type="Malaysia"><img src="Img/Flags-Icon-Set/24x24/MY.png" width="22" height="22" alt=""/> Malaysia</li>
<li data-type="Netherlands"><img src="Img/Flags-Icon-Set/24x24/NL.png" width="22" height="22" alt=""> Netherlands</li>
<li data-type="Philippines"><img src="Img/Flags-Icon-Set/24x24/PH.png" width="22" height="22" alt=""/> Philippines</li>
<li data-type="Singapore"><img src="Img/Flags-Icon-Set/24x24/SG.png" width="22" height="22" alt=""/> Singapore</li>
<li data-type="Taiwan"><img src="Img/Flags-Icon-Set/24x24/TW.png" width="22" height="22" alt=""/> Taiwan</li>
</ul>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要一个容器来编写所选语言，因此请在{Language}周围包含<span>，并为其提供一个ID，以便于选择。

然后，像这样的一些代码可以解决这个问题：

jsFiddle Demo Updated jsFiddle Demo Updated jsFiddle Demo

$('ul li').click(function(e){
        e.stopPropagation(); //prevent firing twice (once for li, once for ul)
        var t = $(this).data('type');
        $('#lang').text( t );
        $('.language').fadeOut();
});

Answer 2

我终于找到了答案，部分归功于帮助我解决这个问题的胡言乱语。经过长时间的尝试，最终答案是：

$(function() {
$('button, li').click(function(){
	var t = $(this).data('type');
    $('#lang').text( t );
    $('.language').toggle();
	});
});

<button type="button"><img src="Img/global logo.png" width="16" height="16" alt=""> Country:<span id="lang"> England</span></button>
<div class="choose">
<br>
<p>This changes the language of the site.</p>
<hr>
<div class="language">
<ul class="country">
<li data-type="Brazil"><img src="Img/Flags-Icon-Set/24x24/BR.png" width="22" height="22" alt=""/> Brazil</li>
<li data-type="China"><img src="Img/Flags-Icon-Set/24x24/CN.png" width="22" height="22" alt=""/> China</li>
<li data-type="England"><img src="Img/Flags-Icon-Set/24x24/GB.png" width="22" height="22" alt=""/> England</li>
<li data-type="Germany"><img src="Img/Flags-Icon-Set/24x24/DE.png" width="22" height="22" alt=""/> Germany</li>
<li data-type="Hong Kong"><img src="Img/Flags-Icon-Set/24x24/HK.png" width="22" height="22" alt=""/> Hong Kong</li>
<li data-type="India"><img src="Img/Flags-Icon-Set/24x24/IN.png" width="22" height="22" alt=""/> India</li>
<li data-type="Indonesia"><img src="Img/Flags-Icon-Set/24x24/ID.png" width="22" height="22" alt=""/> Indonesia</li>
<li data-type="Malaysia"><img src="Img/Flags-Icon-Set/24x24/MY.png" width="22" height="22" alt=""/> Malaysia</li>
<li data-type="Netherlands"><img src="Img/Flags-Icon-Set/24x24/NL.png" width="22" height="22" alt=""> Netherlands</li>
<li data-type="Philippines"><img src="Img/Flags-Icon-Set/24x24/PH.png" width="22" height="22" alt=""/> Philippines</li>
<li data-type="Singapore"><img src="Img/Flags-Icon-Set/24x24/SG.png" width="22" height="22" alt=""/> Singapore</li>
<li data-type="Taiwan"><img src="Img/Flags-Icon-Set/24x24/TW.png" width="22" height="22" alt=""/> Taiwan</li>
</ul>
</div>
</div>
</div>