javascript - jquery 添加和删除类

Question

我现在有一个导航菜单，如何在单击任何跨度后添加选定的类，并使用 Jquery 从先前的跨度中删除选定的类。

<div class="large-12 columns TSCSlot">
    <div class="large-10 columns DayRow">
        <div class="large-12 columns left DaySelected">
            <span class="Selected"></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>                      
        </div>
    </div>
</div>

$('div.large-12.columns.left.DaySelected > span').click(function(e) {
    e.preventDefault(); // prevent the default action
    e.stopPropagation; // stop the click from bubbling
    $(this).closest('span').find('.selected').removeClass('selected');
    $(this).parent().addClass('selected');
});

span.Selected {
    background-color: #5e9e37 !important;
    color: white !Important;
}

谁能指出我做错了什么？

Answer 1

您的点击目标是跨度，因此 closest('span') 会找到自己，因此您的以下 find('.selected') 将找不到“选定”元素:

试试这个:http://jsfiddle.net/TrueBlueAussie/6pg5as4n/

$(this).closest('.DaySelected').find('.selected').removeClass('selected');
$(this).addClass('selected');

HTML:

<div class="large-12 columns TSCSlot">
    <div class="large-10 columns DayRow">
        <div class="large-12 columns left DaySelected">
            <span class="selected"></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>                      
        </div>
    </div>
</div>

注释:

• 将closest与.DaySelected结合使用将确保您不会修改页面上的其他控件。您也可以只使用 parent() 例如$(this).parent().find('.selected').removeClass('selected')
• 然后，第二行将 selected 类添加到单击的 span。
• 您在 html 中的 selected 上有一个大写的 S。已将其更改为小写 s 以匹配代码。
• 您似乎不需要阻止传播，并且跨度没有要阻止的默认操作。例如http://jsfiddle.net/TrueBlueAussie/6pg5as4n/1/
• 您可以简单地返回 false 来执行以下操作，而不是 e.preventDefault() 和 e.stopPropagation em>两者。例如http://jsfiddle.net/TrueBlueAussie/6pg5as4n/2/