Frontend employee Frontend employee - 29 days ago 19
HTML Question

Isolate list Items

I have made a list items of languages that will toggle when someone is clicking on a list item (no matter which one on the website). The footer and navbar both contains list items too. So how could I solve this issue. The only list item that should react on this click is the language list items. How should I rewrite my JavaScript codes below to fix that.



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

Language list items

<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 this website.</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>
</ul>
</div>

Navbar

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>Smart Devices</strong></a>
<ul class="dropdown-menu">
<li>Mi Air Purifier</li>
<li>Mi Band</li>
</ul>
</li>

Footer

<div class="footer">
<hr>
<ul class="pull-left">
<li>About</li>
<li>Management</li>
<li>Contact us</li>
<li>Privacy</li>
<li>Policy</li>
<li>User Agreement</li>
</ul>
<p class="pull-right"><strong>Copyright © 2010 - 2016 Xiaomi. All Rights Reserved</strong></p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>






Answer

Just rewrite the selector to something like:

$('button, .country li').click(function(){

$(function() {
$('button, .country li').click(function(){
	var t = $(this).data('type');
    $('#lang').text( t );
    $('.choose').toggle();
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Language list items

<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 this website.</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>
</ul>
</div>

Navbar

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>Smart Devices</strong></a>
<ul class="dropdown-menu">
<li>Mi Air Purifier</li>
<li>Mi Band</li>
</ul>
</li>

Footer

<div class="footer">
<hr>
<ul class="pull-left">
<li>About</li>
<li>Management</li>
<li>Contact us</li>
<li>Privacy</li>
<li>Policy</li>
<li>User Agreement</li>
</ul>
<p class="pull-right"><strong>Copyright © 2010 - 2016 Xiaomi. All Rights Reserved</strong></p>
</div>