Question

我想知道是否有人可以改进我的代码...使用jQuery我试图在元素上应用一个类，我们只需单击并在其他元素上禁用此类。

您将在我的代码中查看我正在尝试应用我刚刚单击的类，并删除其他元素上的所有类。

但就目前而言，正如你在 $（“choice1-1”）中看到的那样，我正在做“简单而漫长的方式”。点击（function（）

有些人可以使用可以检测所有其他ID的代码来帮助我吗？

这是我目前的代码

$(document).ready(function() 
{
    $('#stick-question-1').mouseenter(function() 
    {
        $('#stick-choices-1').show();

    });

    $('#stick-choices-1').mouseleave(function() 
    {
        $('#stick-question-1').show();
        $('#stick-choices-1').hide();
    });


    $("choice1-1").click(function()
    {
        $(this).addClass('hover-etat');
        $("#choice1-2").removeClass('hover-etat');
        $("#choice1-3").removeClass('hover-etat');
        $("#choice1-4").removeClass('hover-etat');
    });

});

我的HTML就像这样

    <div id="stick-choices-1" class="stick-choices">
        <a href="#" onclick="displayChoice1('Under 3\'9'); return false;" id="choice1-1">Under 3'9</a>
        <a href="#" onclick="displayChoice1('4\' to 5\'2'); return false;" id="choice1-2">4' to 5'2</a>
        <a href="#" onclick="displayChoice1('5\'3 to 5\'7'); return false;" id="choice1-3">5'3 to 5'7</a>
        <a href="#" onclick="displayChoice1('5\'8 and more'); return false;" id="choice1-4">5'8 and more</a>        
    </div>

Answer 1

只需使用：

$("#stick-choices-1 a").click(
    function(e) {
        e.preventDefault();
        $('.hover-etat').removeClass('hover-etat');
        $(this).addClass('hover-etat');
    });

我已更改您的初始选择器，以便通过点击click #stick-choices-1元素中的任何链接触发div事件，它会阻止点击链接（假设您希望停止默认值），从具有该类的任何元素中删除hover-etat类，然后将该类名应用于this元件。

但是，将jQuery搜索具有hover-etat类的元素的范围限制为同一#stick-choices-1元素中的元素而不是整个文档可能有意义：

$("#stick-choices-1 a").click(
    function(e) {
        e.preventDefault();
        $('#stick-choices-1 .hover-etat').removeClass('hover-etat');
        $(this).addClass('hover-etat');
    });

或者：

$("#stick-choices-1 a").click(
    function(e) {
        e.preventDefault();
        $(this).siblings('.hover-etat').removeClass('hover-etat');
        $(this).addClass('hover-etat');
    });

Answer 2

它会正常工作：

$("#choice1-1").click(function(){
    $(".stick-choices a").each(function(){
            $(this).removeClass(".hover-etat");
    });
    $(this).addClass(".hover-etat");
});

Answer 3

这应该这样做，并为所有链接注册此处理程序。

$('#stick-choices-1 > a').click(function(ev) {
    $(this).addClass('hover-etat').siblings().removeClass('hover-etat');
    ...
});

请注意使用.siblings()来确保只有同一组中的链接受到影响，并且不会对所点击的链接发送不必要的类更改。

Answer 4

此点击事件适用于所有选项：

$('.stick-choices a').click(function(e){
    $(this).siblings('.hover-etat').removeClass('hover-etat');
    $(this).addClass('hover-etat');
});

Answer 5

$('div.stick-choices a').on('click', function(e) {
   e.preventDefault();
   $(this).addClass('hover-etat').siblings('a').removeClass('hover-etat');
});

Answer 6

$（“a”，$（“＃stick-choices-1”））。click（function（）{
   $(".hover-etat").removeClass('hover-etat');
   $(this).addClass('hover-etat');
}）;

可能是这样的吗？

jQuery：如何在点击时删除所有元素的类？

6 个答案: