2

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

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

但就目前而言，正如您在$("choice1-1").click(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>
4

6 回答 6

3

只需使用：

$("#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元素。

hover-etat但是，将 jQuery 搜索具有该类的元素的范围限制为同一元素中的那些元素#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');
    });
于 2012-04-19T16:26:05.090 回答
0

它会正常工作：

$("#choice1-1").click(function(){
    $(".stick-choices a").each(function(){
            $(this).removeClass(".hover-etat");
    });
    $(this).addClass(".hover-etat");
});
于 2012-04-19T16:27:07.137 回答
0

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

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

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

于 2012-04-19T16:28:45.470 回答
0

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

$('.stick-choices a').click(function(e){
    $(this).siblings('.hover-etat').removeClass('hover-etat');
    $(this).addClass('hover-etat');
});
于 2012-04-19T16:29:11.660 回答
0 
$('div.stick-choices a').on('click', function(e) {
   e.preventDefault();
   $(this).addClass('hover-etat').siblings('a').removeClass('hover-etat');
});
于 2012-04-19T16:29:49.663 回答
0

$("a", $("#stick-choices-1")).click(function(){

   $(".hover-etat").removeClass('hover-etat');
   $(this).addClass('hover-etat');

});

可能是这样的吗？

于 2012-04-19T16:29:57.773 回答