Click events on same element not working
Question
SHORT VERSION OF THE PROBLEM:
on click, change color of the clicked label, then scroll to .filterDiv element.
i can only make it change color, or directly scroll to the .filterDiv without it changing color.
Hello guys! practically i have a page with a sidebar layout. the sidebar consists of categories to choose from.
the first "click" function is the w3schools filterSelection, but it works on click so the event should be a "click" event.
<script>
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
</script>
the second click event, is when you click the category you want to show items from, it has to change the color from black to red.
$('.col-sm-3 label').on('click', function(){
$('label.active').removeClass('active');
$(this).addClass('active');
});
and the third click event is that, when clicking the category, it should scroll to the desired div/ element.
$('.col-sm-3 label').on('click', function(){
$('html, body').animate({
scrollTop: $(".filterDiv").offset().top
}, 1000);
return false;
});
And here is the Long HTML too:
<div class="row" style="margin:0px 0px;">
<div class="col-xs-12 col-sm-3">
<!-- Control buttons -->
<div style="border:1px solid #d0d0d0;padding:25px 15px;border-radius:5px;">
<p style="margin-top:0px;border-bottom:1px solid #d0d0d0;font-size:28px;padding-bottom:10px;">Hidhi një sy dhuratave</p>
<input id="dhurata" type="radio" onclick="filterSelection('dhurata')" name="category" style="display:none;">
<label for="dhurata" class="active">Dhurata me dashuri nga Telekom</label>
<input id="cela" type="radio" onclick="filterSelection('cela')" name="category" style="display:none;">
<label for="cela" class="">Smartphone</label>
<input id="smartp" type="radio" onclick="filterSelection('smartp')" name="category" style="display:none;">
<label for="smartp" class="">Smartphone Premium</label>
<input id="elektronike" type="radio" onclick="filterSelection('elektronike')" name="category" style="display:none;">
<label for="elektronike" class="">Elektronike</label>
<input id="fash" type="radio" onclick="filterSelection('fash')" name="category" style="display:none;">
<label for="fash" class="">Fashion</label>
<input id="aksesor" type="radio" onclick="filterSelection('aksesor')" name="category" style="display:none;"><label for="aksesor" class="">Aksesorë</label>
<input id="kinema" type="radio" onclick="filterSelection('kinema')" name="category" style="display:none;">
<label for="kinema" class="">Kinema</label>
<input id="libra" type="radio" onclick="filterSelection('libra')" name="category" style="display:none;">
<label for="libra" class="">Libra</label>
<input id="ushqim" type="radio" onclick="filterSelection('ushqim')" name="category" style="display:none;">
<label for="ushqim" class="">Drinks</label>
<input id="buk" type="radio" onclick="filterSelection('buk')" name="category" style="display:none;">
<label for="buk" class="">Ushqim</label>
<input id="kozmetik" type="radio" onclick="filterSelection('kozmetik')" name="category" style="display:none;">
<label for="kozmetik" class="">Kozmetike</label>
</div></div><div class="col-xs-12 col-sm-8">
<div class="filterDiv dhurata show" id="xeni">
<div class="row">
<div class="col-xs-6 col-sm-4 col-lg-2" data-toggle="popover" title="" data-content=" Një filxhan çaji cool nga Electronic Beats.
" data-original-title=" Filxhan caji
" data-trigger="focus" tabindex="0" role="button" data-placement="top">
<img src="icon/icon-03.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Një filxhan çaji cool Electronic Beats!
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2" data-toggle="popover" title="" data-content="Some content inside the popover" data-original-title="">
<img src="icon/icon-05.png" style="width:100%;height:auto;"><div class="desc" style="display: none;"> Kufje premium EB Urbanears pa tela. Për entuziastët e muzikës.
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2">
<img src="icon/icon-06.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Bateri Portative 2200mAh
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2">
<img src="icon/icon-07.png" style="width:100%;height:auto;">
<div class="desc" style="display:none;"> Një çift blloqesh shënimi me lëkurë. Paketë 2 copëshe.
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2 open">
<img src="icon/icon-08.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;"> Një çift T-Shirt Electronic Beats. Paketë 2 copëshe.
</div>
</div><div class="col-xs-6 col-sm-4 col-lg-2">
<img src="icon/icon-09.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Një çantë shpine simpatike nga Electronic Beats.</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2">
<img src="icon/icon-14.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;"> Një çadër shiu premium nga Telekom.
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2">
<img src="icon/icon-15.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;"> Një arush nga Telekom. Dhurata më e përqafueshme që kemi!
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2">
<img src="icon/icon-20.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;"> 1 GB internet te vlefshme per 7 dite
</div>
</div>
</div>
</div>
<div class="filterDiv cela">
<div class="row">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-13.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">LG G5</div>
</div><div class="col-xs-6 col-lg-2">
<img src="icon/icon-22.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Alcatel POP 4</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-16.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Samsung Galaxy A5 2017</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-23.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Alcatel Idol 4</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-04.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Smartphone T3</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-10.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Smartphone A6</div>
</div>
</div>
</div><div class="filterDiv smartp">
<div class="row">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-11.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">iPhone 7</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-12.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">iPhone SE</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-17.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Samsung Galaxy S6 Edge</div>
</div><div class="col-xs-6 col-lg-2">
<img src="icon/icon-18.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Samsung Galaxy S7</div>
</div><div class="col-xs-6 col-lg-2">
<img src="icon/icon-19.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">iPhone 6</div>
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-21.png" style="width:100%;height:auto;">
<div class="desc" style="display: none;">Samsung Galaxy S8 </div>
</div>
</div>
</div><div class="filterDiv elektronike">
<div class="col-xs-6 col-lg-2 "><img src="icon/icon-28.png" style="width:100%;">
</div>
<div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>10% ulje në televizorë dhe elektroshtëpiake ose 2% ulje në laptop, tablet dhe celularë. Kodi vlen edhe nëse pajisjet janë në dyqanet Neptun.</p>
<p>Si? Paraqit kodin që ke në SMS në dyqan Neptun. Vizito <a href="www.neptun.al">www.neptun.al</a> për listën e dyqaneve</p></div>
</div><div class="filterDiv fashion">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-24.png" style="width:100%;">
</div><div class="col-xs-6 col-lg-2">
<img src="icon/icon-25.png" style="width:100%;">
</div>
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-33.png" style="width:100%;">
</div>
<div class="col-xs-12 col-lg-12"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>20% ulje tek dyqani përkatës Mango, Springfield, Parfois tek TEG. Kodi është i vlefshëm për 1 artikull të koleksionit të ri. Afati i përdorimit ndryshon, ju lutemi konsultohuni me përfaqësuesin
e shitjeve ose <a href="https://www.electronicbeats.com.al">www.electronicbeats.com.al</a></p><p>
Si? Paraqit kodin që ke në SMS në dyqanet përkatëse. Ulja aplikohet mbi një artikull të vetëm.</p></div>
</div><div class="filterDiv kinema">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-31.png" style="width:100%;">
</div><div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>1 Biletë FALAS tek Cineplexx. Çdo ditë që dëshiron, në çdo orë.</p><p>
Si? Paraqit kodin që ke në SMS në biletarinë e Cineplexx.</p>
</div>
</div>
<div class="filterDiv libra">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-26.png" style="width:100%;">
</div><div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>10% ulje në çdo blerje tek <a href="https://www.bukinist.al">www.bukinist.al.</a> Ulja aplikohet mbi totalin e porosisë. Bukinist.al pranon porosi nga gjithë Shqipëria.
Si? Përfaqësuesi ynë i shitjeve do të shënojë një kod unik mbi këtë fletë. Përdor këtë kod:</p>
<ul><li>Në përfundimin e porosisë tek fusha “KUPONA”</li><li>Në çdo kanal tjetër ku pranohen porosi nga Bukinist, mund t’i transmetoni kodin e kuponit përfaqësuesit të Bukinist për të përfituar uljen.</li></ul>
</div>
</div><div class="filterDiv ushqim">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-30.png" style="width:100%;">
</div>
<div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>Një kupon me vlerë 250 lekë që mund ta shpenzosh në çdo bar Mon Cheri.
Si? Përfaqësuesi ynë i shitjeve do t’ju dorëzojë një kupon zyrtar (në formë bilete) Mon Cheri.
</p><p>
Paraqitni kuponin në çdo pikë Mon Cheri tek baristët simpatikë, dhe shijoni porosinë tuaj.</p>
</div>
</div><div class="filterDiv kozmetik">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-35.png" style="width:100%;">
</div>
<div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>15 % ulje në çdo blerje tek <a href="www.ele.al">www.ele.al</a>. Ulja aplikohet mbi totalin e porosisë. ele.al. Ka produkte kozmetike profesionale nga Revlon, American Crew, Orofluido, etj.</p><p>
Si? Përfaqësuesi ynë i shitjeve do të shënojë një kod unik mbi këtë fletë.
Përdor këtë kod: Në përfundimin e porosisë tek fusha “KODI I ZBRITJES” dhe shtyp “APLIKO”
</p>
</div>
</div><div class="filterDiv buk">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-32.png" style="width:100%;">
</div>
<div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>
20% ulje për çdo artikull, në çdo pikë shitje.</p><p>
Si? Paraqit kodin që ke në SMS në çdo pikë KFC.
</p>
</div><div class="row">
<div class="col-xs-6 col-sm-3"><img src="menu/mix_bucket_for 4.jpg" style="width:100%;"></div>
<div class="col-xs-6 col-sm-3"><img src="menu/twister_menu.jpg" style="width:100%;"></div>
<div class="col-xs-6 col-sm-3"><img src="menu/file_salad.jpg" style="width:100%;"></div>
<div class="col-xs-6 col-sm-3"><img src="menu/boxmaster_menu.jpg" style="width:100%;"></div>
</div>
</div><div class="filterDiv aksesor">
<div class="col-xs-6 col-lg-2">
<img src="icon/icon-34.png" style="width:100%;">
</div>
<div class="col-xs-12 col-lg-10"><p style="color:#e20074;font-size:24px;font-weight:900;">TI PËRFITON:</p>
<p>30% ulje për të gjithë artikujt bijou ose argjend në dyqanet Bijoutiful.
</p><p>Si? Paraqit kodin që ke në SMS në pikat e shitjes Bijoutiful.
Ulja aplikohet mbi gjithë porosinë nëse përfshin artikuj të vlefshëm. Mëso pikat e shitjes Bijoutiful tek <a href="www.bijoutiful.al">www.bijoutiful.al</a>
</p>
</div>
</div>
<!-- The filterable elements. Note that some have multiple class names (this can be used if they belong to multiple categories) -->
</div>
</div>
I have tried combining them into one .on(click) event, i have tried .bind instead of .on, i have tried .click aswell. it seems that only one of the events executes, depending which of them is before the other.
1 answers
solution1
0 2017-10-16 15:36:58
You can have something like this:-
$(document).on('click', '.col-sm-3 label', function(){
$('.col-sm-3 label.active').removeClass('active');
$(this).addClass('active');
var rdiv = $(this).attr("for");
$('html, body').animate({
scrollTop: $("."+rdiv).offset().top
}, 1000);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Multiple click events for the same element?
Two click events for the same element
Direct JQuery click events to two of same element?
Conflicting click and hover events on the same element
how to make multiple click events on the same element?
can multiple click events be used on the same element?
Click events from two scripts on same element?
How to bind click and double click events on the same element in CKeditor
Differentiate between two different click events on same element
vue.js: how to handle click and dblclick events on same element
Related Tags