0

我有一个标题为“请选择您的城市”的 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');
});
4

4 回答 4

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/

于 2013-08-08T21:05:28.557 回答
0

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

于 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 回答
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 回答