Question

我想知道我在这里做错了什么。我有一个可以选择的列表，当选择时，设置了“clicked”类。但是当我选择另一个项目时，应取消选择prev项目并将点击的课程传递给新项目，但在我的情况下，这不会发生！？

这是我的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

您的删除课程点击错过了。字首。此外，您还要从子元素中删除单击，然后将其添加到父元素。逻辑不起作用。并且还存在需要管理的悬停的多种行为。一个解决方案是用这个替换你的删除类调用：

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

http://jsfiddle.net/sfwo6gxn/

Answer 2

<强>修改：对于悬停功能，添加一个css类而不是脚本。

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

添加css中缺少的类.clicked

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

并删除类应为$('.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添加类en在选择另一个项目时将其删除

2 个答案: