0

いくつかの DIV の CSS クラスを変更しようとしています。以下のリンクは私の jFiddle です

唯一の変更点は、選択されたクラスが実際には選択されていないクラスの背景色を持っているように見える背景画像を持っていることです。

もう1つの問題は、別のdivを選択した後、最初のdivを再度選択できないことです。jQuery はクラスに対して正確に何をしているのですか? -non-selected クラスを追加すると、再び選択可能になるはずですよね?

http://jsfiddle.net/9FZcz/

jQuery

$(".selector-box").click(function () {
    $(".selector-box-selected").removeClass("selector-box-selected").addClass("selector-box");
    $(this).removeClass("selector-box").addClass("selector-box-selected");
});

HTML

<div class="selector-box-selected"></div>
<div class="selector-box"></div>
<div class="selector-box"></div>
<div class="selector-box"></div>

CSS

.selector-box{
    margin-bottom:2px;
    width:328px;
    height:46px;
    background-color:rgba(255,255,255,.25);
}
.selector-box-selected{
    margin-bottom:2px;
    width:351px;
    height:46px;
    background-image:url(../images/layout/SelectedArrow.png);
}
4

4 に答える 4

5

クラスを追加および削除する別の方法を試す必要があります。次の方法を試してください。

$(".selector-box").click(function () {
    $('.selector-box').removeClass("selected");
    $(this).addClass("selected");
});

更新された JsFiddle

于 2013-11-08T02:07:31.193 に答える
0

私はあなたのコードを少し変更します

<div name="ss" class="selector-box-selected"></div>
<div name="ss" class="selector-box"></div>
<div name="ss" class="selector-box"></div>
<div name="ss" class="selector-box"></div>

$("div[name=ss]").click(function () {
    $("div[name=ss]").removeClass("selector-box-selected").addClass("selector-box");
    $(this).removeClass("selector-box").addClass("selector-box-selected");
});

SS の名前は気にしないで、好きな名前に変更してください :D

于 2013-11-08T02:00:55.230 に答える
0

最初のものを再度選択できないという問題は、クリックイベントがそれにリンクされていないことです。これ<div>は、 class を持つ要素にのみ適用するためです.selector-box。それとは別に、CSS は問題ないようです。フィドルを確認してください: http://jsfiddle.net/9FZcz/2/

于 2013-11-08T02:01:11.190 に答える