jQuery .addClass 未在 $(this) 上执行答案

【问题标题】：jQuery .addClass not executing on $(this)jQuery .addClass 未在 $(this) 上执行
【发布时间】：2012-10-02 04:50:23
【问题描述】：

我正在尝试更改列表项，当用户单击选定的类更改为单击的项时。我有这个代码：

$(function() {
    $("a.product-page li").click(function(){
        $(this).parent("a").addClass("selected-page");
        $("#options a.selected-page").removeClass("selected-page");
    });
});

但是 removeClass 可以工作，而 addClass 不能。

这里是Site。

HTML：

<ul id="options">
    <a href="#summary" id="summary" class="product-page selected-page"><span></span><li>Summary</li></a>
    <a href="#specs" id="specs" class="product-page"><span></span><li>Specs</li></a>
    <a href="#media" id="media" class="product-page"><span></span><li>Media</li></a>
    <a href="#reviews" id="review" class="product-page"><span></span><li>Reviews</li></a>
</ul>

CSS：

ul#options {
    margin-left:0px;
}

ul#options li{
    list-style:none;
    padding: 10px 20px;
    background: #CCC;
    border-top: 1px #999 solid;
    border-left: 1px #999 solid;
    border-right: 1px #999 solid;
}

ul#options a{
    display:block;
    border:none !important;
}

ul#options a.selected-page span{
    position:absolute;
    width:0px;
    height:0px;
    border-width:10px;
    border-color:transparent #999999 transparent transparent;
    border-style:solid;
    margin-left:270px;
    margin-top:11px;
}

ul#options a:last-child li {
    border-bottom:1px #999 solid;
}

【问题讨论】：

无效的html...应该是<li><a>...</a></li>。

标签： javascript jquery html addclass

【解决方案1】：

这是因为您要立即删除该课程。把这两行翻过来，就可以了。

$(function() {
    $("a.product-page li").click(function(){
        $("#options a.selected-page").removeClass("selected-page");
        $(this).parent("a").addClass("selected-page");
    });
});

正如上面评论中所指出的，您的 HTML 格式也非常错误。这需要修复。

【讨论】：

【解决方案2】：

你应该将<a>链接标签包裹在li标签内，如下所示，

HTML：

<ul id="options">
    <li><a href="#summary" id="summary" class="product-page selected-page"><span></span>Summary</a></li>
    <li><a href="#specs" id="specs" class="product-page"><span></span>Specs</a></li>
    <li><a href="#media" id="media" class="product-page"><span></span>Media</a></li>
    <li><a href="#reviews" id="review" class="product-page"><span></span>Reviews</a></li>
</ul>

您正在删除刚刚添加的课程。您可以将删除类移到 addclass 上方，或者仅在删除时使用不排除它..

代码：

$(function() {
    $("a.product-page", $('#options')).click(function(){
        $(this).addClass("selected-page");
        $("#options a.selected-page").not(this).removeClass("selected-page");            
    });
});

【讨论】：

【解决方案3】：

您正在添加类，然后在下一行中删除。

这里的顺序

$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");

不正确。

【讨论】：

【解决方案4】：

换行

    $(this).parent("a").addClass("selected-page");
    $("#options a.selected-page").removeClass("selected-page");

【讨论】：