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中的S上有一个大写的selected。已将其更改为小写s以匹配代码。

您似乎不需要阻止传播，并且没有默认操作来阻止传播。例如http://jsfiddle.net/TrueBlueAussie/6pg5as4n/1/

而不是e.preventDefault() 和 e.stopPropagation，您只需return false即可这两个。例如http://jsfiddle.net/TrueBlueAussie/6pg5as4n/2/

Answer 2

正如你在帖子中说的那样。您正在单击当前范围您可以添加所选类，剩余的选定类将被删除

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

注意：在css中选择未选择的类

<强> DEMO

Answer 3

一些小改进：

<span class="Selected"</span>应为<span class="selected"></span>

（类的小起始字符和＆gt;添加）

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

click绑定了<span>。因此，如果您使用jQuery(this)，它实际上是您想要更改的范围。所以你不需要.parent() .find()或其他任何东西来添加它。

Answer 4

我认为您的DOM选择错误。

$('div.large-12.columns.left.DaySelected > span')

应该是

$('div.large-12.columns .left.DaySelected > span')

jquery添加和删除类

4 个答案: