同一元素上的单击事件不起作用答案

【问题标题】：Click events on same element not working同一元素上的单击事件不起作用
【发布时间】：2026-02-16 03:20:05
【问题描述】：

问题的简短版本：

点击时，更改点击标签的颜色，然后滚动到 .filterDiv 元素。
我只能让它改变颜色，或者直接滚动到 .filterDiv 而不改变颜色。

大家好！实际上，我有一个带有侧边栏布局的页面。侧边栏包含可供选择的类别。

第一个“点击”函数是 w3schools filterSelection，但它在点击时起作用，因此该事件应该是一个“点击”事件。

 <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>

第二次点击事件，当你点击你想显示的商品的类别时，它必须将颜色从黑色变为红色。

$('.col-sm-3 label').on('click', function(){

    $('label.active').removeClass('active');
    $(this).addClass('active');
    });

第三个点击事件是，当点击类别时，它应该滚动到所需的 div/ 元素。

$('.col-sm-3 label').on('click', function(){
$('html, body').animate({
        scrollTop: $(".filterDiv").offset().top
    }, 1000);
     return false;
});

这里也是长 HTML：

<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>

我尝试将它们组合成一个 .on(click) 事件，我尝试过 .bind 而不是 .on，我也尝试过 .click。似乎只有一个事件执行，这取决于它们中的哪一个在另一个之前。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你可以有这样的东西：-

$(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);

});

【讨论】：

它似乎以某种方式工作，但是，当我第一次单击它时，它会滚动到页面顶部，如果我再次单击它（同一类别项目），它将滚动到所需的元素。有什么想法吗？
尝试在你的函数中添加 ev.preventDefault()。您在项目中是否为此标签编写了任何其他点击功能？ $(document).on('click', '.col-sm-3 label', function(ev){ ev.preventDefault();