0

見出しが「あなたの都市を選択してください」であるHTMLリストと、非表示の都市の非表示リストがあります。見出しをクリックすると、リストが表示され、1 つをクリックすると、すべてが消えて、都市のみが表示されます。別の都市を選択できるように都市をもう一度クリックしようとすると、それらが元に戻りません。 

$=jQuery
$('.heading').click(function () {
    $('.city').show();
});

$('.city').click(function () {
    $(this).show();
    $('.heading').hide();
    $('.city').removeClass('cityhover');
    $(this).removeClass('city');
    $(this).addClass('cityhover');
    $('.city').hide();
});

$('.cityhover').click(function () {
    $('.heading').show();
    $('.city').show();
    $('.cityhover').removeClass('cityhover');
});
4

4 に答える 4

0

これはイベント委任の問題です。イベントを要素にバインドしてから、クラスを変更し、イベントが更新されることを期待していました。この場合、イベント委任を使用する必要があります。

http://jsfiddle.net/u9wS3/

$(document).on('click', '.city', function () {
    $(this).show();
    $('.heading').hide();
    $('.city').removeClass('cityhover');
    $(this).removeClass('city');
    $(this).addClass('cityhover');
    $('.city').hide();
});

$(document).on('click','.cityhover', function () {
    $('.heading').show();
    $(this).addClass('city'); // also added this line
    $('.city').show();
    $('.cityhover').removeClass('cityhover');
});
于 2013-08-08T21:06:42.930 に答える
0

jQuery は、実行後にセレクターを再評価しません。
この$('.cityhover').click(function () {ビットは、現在 .cityhover 要素を持ち、クリック ハンドラーがアタッチされているすべての要素を選択しますが、className 自体は特別なものにしません。後で and 要素にクラスを追加してcityhoverも、クリック ハンドラは取得されません。

私の提案は、クリックされた要素の現在のクラス名に基づいて、.city および .cityhover クラスとブランチのクリック ハンドラーを組み合わせることです。

$('.city').click(function () {
    if ($(this).hasClass('city')) {
        $(this).show();
        $('.heading').hide();
        $('.city').removeClass('cityhover');
        $(this).removeClass('city');
        $(this).addClass('cityhover');
        $('.city').hide();
    } else {
        $('.heading').show();
        $('.city').show();
        $('.cityhover').addClass('city').removeClass('cityhover');
    }
});

jsフィドル

于 2013-08-08T21:06:07.297 に答える
0

私はそれのほとんどを書き直しました。ステータスを設定し、必要に応じて CSS に表示と非表示を処理させることを好みます。前述のように、イベント ハンドラーを DOM オブジェクトにバインドすると、クラスを追加または削除しても、バインドされたままになるため、ほとんどの問題が発生します。

いずれにせよ、コードは次のとおりです。HTMLは変更されていません

Javascript:

$ = jQuery;
$('.citychooser').on('click', '.heading', null,

function () {
    $(this).parent().addClass('choosing');
});

$('.citychooser').on('click', '.city', null,

function () {
    if($(this).closest('.citychooser').hasClass('choosing'))
    {
        $(this).addClass('active');
        $(this).parent().removeClass('choosing').addClass('chosen');
    } else {
        $(this).removeClass('active');
        $(this).parent().addClass('choosing').removeClass('chosen');
    }
});

CSS:

.citychooser.chosen .heading{
    display:none;
}
.citychooser.chosen .city{
    display:none;
}
.citychooser.chosen .city.active{
    display:block;
}
.citychooser .city {
    display:none;
}
.citychooser.choosing .city {
    display:block;
}
.citychooser.choosing .header{
display:block;
}
.city:hover {
    background-color: #808080;
}
.cityhover {
    background-color: #808080!important;
}
.citychooser {
    width: 555px;
    float: right;
    list-style-type: none;
    margin-top: 0px;
}
.citychooser li {
    background-color: #cccccc;
    margin-bottom: 5px;
    height: 50px;
    line-height: 50px;
}
.citychooser .heading {
    text-indent: 20px;
}

jsfiddle: http://jsfiddle.net/aLj3V/7/

新しいアイテムが選択されるまで再選択している間、背景を暗いままにしたい場合は、次の JavaScript を使用できます。

$ = jQuery;
$('.citychooser').on('click', '.heading', null,

function () {
    $(this).parent().addClass('choosing');
});

$('.citychooser').on('click', '.city', null,

function () {
    if($(this).closest('.citychooser').hasClass('choosing'))
    {
        $(this).parent().find('.active').removeClass('active');
        $(this).addClass('active');
        $(this).parent().removeClass('choosing').addClass('chosen');
    } else {
        $(this).parent().addClass('choosing').removeClass('chosen');
    }
});

そのためのjsfiddle：http://jsfiddle.net/aLj3V/8/

于 2013-08-08T21:26:47.860 に答える