点击无法正常工作的问题

上点击，点击的标签变色，然后滚动到.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>

我试图把它们合并成一个。上（点击）事件，我已经试过.bind代替。对，我都试过了。点击以及。似乎只有一个事件执行，取决于哪一个在另一个之前。

来源

2017-10-16 master Nixe

你可以有这样的事情： -

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

});

来源

2017-10-16 15:36:58 Jayshree

似乎以某种方式工作，但是，当我点击它的第一次，它滚动到页面顶部，如果我再次点击它的第二次（相同的类别项目），它将滚动到所需的元素。任何想法？ –

尝试在你的函数中添加ev.preventDefault（）。您的项目中是否有为此标签编写的其他点击功能？ $（document）.on（'click'，'.col-sm-3 label'，function（ev）{ev.preventDefault（）; – Jayshree

点击无法正常工作的问题

回答

相关问题