Question

我有一个HTML列表，其标题是“请选择您的城市”和隐藏城市隐藏的列表。单击标题后，列表显示，您可以单击一个，然后它们全部消失，您只能看到该城市。当我再次尝试点击这座城市时，我可以选择一个他们不打开的不同城市。

$=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');
});

Answer 1

这就是为什么它不起作用。关注我的评论。

$('.heading').click(function () {
    $('.city').show(); // ok we show all the cities
});


$('.city').click(function () { // clicked on a city
    $(this).show();
    $('.heading').hide();  // hide the heading
    $('.city').removeClass('cityhover'); // HERE you remove the cityhover class
    $(this).removeClass('city');
    $(this).addClass('cityhover');
    $('.city').hide();
});

$('.cityhover').click(function () { // but the only way to show the heading again is if you click one
    $('.heading').show();
    $('.city').show();
    $('.cityhover').removeClass('cityhover');
});

诀窍是使用事件委托：

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

http://jsfiddle.net/seancannon/rVq2T/

Answer 2

jQuery一旦运行就不会重新评估选择器 $('.cityhover').click(function () {位选择当前具有.cityhover元素且附加了单击处理程序的所有元素，但不会使className本身特殊。稍后将类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');
    }
});

jsFiddle

Answer 3

这是事件授权的问题。您将事件绑定到元素，然后更改类并期望事件更新。在这种情况下，您需要使用事件委派：

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');
});

Answer 4

我重写了大部分内容，我更喜欢设置状态，让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/

'单击'功能不使用列表

4 个答案: