jQuery onclick 添加 class en 在选择另一个项目时将其删除

Question

我想知道我在这里做错了什么。 I have a list which can be selected, and when selected the "clicked" class is set.但是当我选择另一个项目时，应该取消选择上一个项目并将点击的 class 传递给新项目，但在我的情况下这没有发生！？

这是我的 jQuery 代码：

$(".select-examn-row-item").hover(
    function() {
        $(this).addClass('hovered');
    }, function() {
        if(!$(this).hasClass('clicked') ){
            $(this).removeClass('hovered');
        }
    }
);

$(".select-examn-row-item").click(function(e){
    e.preventDefault(); 
    e.stopPropagation;
    $(this).find('clicked').removeClass('clicked');
    $(this).addClass('clicked');
});

也许有人可以在这方面指导我。 And my working Fiddle

Answer 1

您的删除 class 点击缺少 .字首。此外，您要从子元素中删除 clicked 然后将其添加到父元素。逻辑不成立。并且悬停也有多种行为需要管理。一种解决方案是将您的 remove class 调用替换为：

$('.clicked:not(:hover)').removeClass('clicked hovered');

http://jsfiddle.net/sfwo6gxn/

Answer 2

修改： 对于悬停功能，添加 css class 而不是脚本。

.select-examn-row-item:hover {
        background-color: #fa6a00;
        color: #fff;
        cursor: pointer;
    }

添加您的 css

中缺少的 class .clicked

.clicked{  background-color: #fa6a00;
        color: #fff;
    cursor: pointer;}

并删除 class 应该是 $('.select-examn-row-item').removeClass('clicked'); 而不是 $(this).find('clicked').removeClass('clicked');

$(".select-examn-row-item").click(function(){
   
    $('.select-examn-row-item').removeClass('clicked');
    $(this).addClass('clicked');
   
});

.select {
    /*width: 300px;*/
    /*border: 1px solid #eee;*/
    color: #444444;
    padding: 10px 20px;
}

    .select-examn-row-item {
        text-decoration: none;
        border-bottom: 1px solid #ccc;
        color: #444;
        display: block;
        padding: 10px;
        font-size: 12px;
        position: relative;
        height: 16px;
    }
    .select-examn-row-item:last-child {border: transparent;}
    
    .select-examn-row-item .selectableRow:after {
        content:"";
        width:0;
        height:0;
        border-top:18px solid transparent;
        border-bottom:18px solid transparent;
        border-left:18px solid #fff;
        position: absolute;
        right: -18px;
        top: 0;
    }
    
    .select-examn-row-item:hover {
        background-color: #fa6a00;
        color: #fff;
        cursor: pointer;
    }
.clicked{  background-color: #fa6a00;
        color: #fff;
    cursor: pointer;}
    
    .select-examn-row-item.hovered .selectableRow:after {
        border-left:18px solid #fa6a00;
    }
    
    .select-examn-row-item .selectableRow i.arrow {
        width: 6px;
        height: 10px;
        display: inline-block;
        float: right;
        background: url('http://s7.postimg.org/ze62pveef/arrow.png') right top no-repeat;
        background-size: 6px 20px;
    }
        .select-examn-row-item.hovered .selectableRow i.arrow {
            color: #fff;
            background-position: right bottom;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="select">
    <div class="select-examn-row-item">
        <div class="selectableRow">First Item <i class="arrow"></i></div>
    </div>
    <div class="select-examn-row-item">
        <div class="selectableRow">Second Item <i class="arrow"></i></div>
    </div>
    <div class="select-examn-row-item">
        <div class="selectableRow">Third Item <i class="arrow"></i></div>
    </div>
</div>

jQuery onclick 添加 class en 在选择另一个项目时将其删除

jQuery onclick add the class en remove it when another item selected

css

jquery

click