3

我制作了一个喜欢/不喜欢的脚本，其工作原理如下：2 个带rate_deal类的按钮。当您单击喜欢或不喜欢按钮时，它会rate_deal从两个按钮中删除该类以防止再次单击，然后添加一些类以使其看起来更好。

我有个问题。我不知道我做错了什么，但是rate_deal当我单击一个按钮时，我无法删除这两个按钮的类。

这是代码：

HTML：

<div class="content_r_d_left_rate" id="deal-1">
<span class="rate_deal content_r_d_l_rate_img_up"></span>
<span class="rate_deal content_r_d_l_rate_img_down"></span>
</div>

jQuery：

$(".rate_deal").click(function(){

        var dealIdRaw = $(this).parent().attr('id');
        var dealId = dealIdRaw.replace('deal-', '');

        $('#'+dealIdRaw).children().removeClass('rate_deal');

        if($(this).hasClass('content_r_d_l_rate_img_up'))
        {
            $('#'+dealIdRaw+' > .content_r_d_l_rate_img_down').addClass('content_r_d_l_rate_img_down_i');
            $('#'+dealIdRaw+' > .content_r_d_l_rate_img_down').removeClass('content_r_d_l_rate_img_down');
        }
        else
        {
            $('#'+dealIdRaw+' > .content_r_d_l_rate_img_up').addClass('content_r_d_l_rate_img_up_i');
            $('#'+dealIdRaw+' > .content_r_d_l_rate_img_up').removeClass('content_r_d_l_rate_img_up');
        }
    });
4

2 回答 2

5

您编写代码的方式存在结构性问题。当你这样做时：

$(".rate_deal").click(function(){

从现在开始，这将为点击处理程序锁定这些 DOM 对象，无论它们是否继续将rate_deal类附加到它们。因此，从结构上讲，当您删除类时，您的点击处理程序不会被删除。

您可以通过使用这样的委托事件处理来解决该问题：

$(".content_r_d_left_rate").on("click", ".rate_deal", function(){

".rate_deal"只有当类在被点击的对象上时，这才会触发点击处理程序。

这个块：

    var dealIdRaw = $(this).parent().attr('id');
    var dealId = dealIdRaw.replace('deal-', '');

    $('#'+dealIdRaw).children().removeClass('rate_deal');

也可以替换为以下任一选项：

    $(this).siblings().add(this).removeClass("rate_deal");

    $(this).parent().find(".rate_deal").removeClass("rate_deal");

    $(this).closest(".content_r_d_left_rate").find(".rate_deal").removeClass("rate_deal");

    $(this).parent.children().removeClass("rate_deal");

我更喜欢第 3 种变体，因为如果您稍微修改 HTML，它最能抵抗破坏。

整个简化代码块是这样的：

$(".content_r_d_left_rate").on("click", ".rate_deal", function(){

    // get our common parent
    var parent = $(this).closest(".content_r_d_left_rate");

    // remove existing .rate_deal classes in this block    
    // so no more clicks get processed
    parent.find(".rate_deal").removeClass("rate_deal");

    // toggle classes based on what was clicked
    if($(this).hasClass("content_r_d_l_rate_img_up")) {
        parent.find(".content_r_d_l_rate_img_down")
            .addClass("content_r_d_l_rate_img_down_i")
            .removeClass("content_r_d_l_rate_img_down");
    } else {
        parent.find(".content_r_d_l_rate_img_up")
            .addClass("content_r_d_l_rate_img_up_i")
            .removeClass("content_r_d_l_rate_img_up");
    }
});
于 2013-10-11T21:26:31.397 回答
-1

由于您只是想在单击时删除类以防止进一步的操作，您可以这样做 -

$('.rate_deal').bind('click',function(){

    $(this).parent().children().removeClass('rate_deal'); //this will remove 'rate_deal' class from both of them.

    //here you can put your change image for up/down thumb logic.

})
于 2013-10-11T21:33:15.040 回答