Jquery '；单击'；函数不使用列表

我有一个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');
});

---

这就是它不起作用的原因。请听我的评论

$('.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 () ....

---

jQuery不会在选择器运行后重新评估它们。

$（'.cityhover'）.click（function（）{

位选择当前具有.cityhover元素并附加了click处理程序的所有元素，但不会使类名本身变得特殊。将类

cityhover

添加到and元素不会导致它获得click处理程序

我的建议是根据所单击元素的当前类名，组合.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');
    }
});

---

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

---

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

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

CSS:

jsfiddle：

如果您希望在重新选择时背景保持黑暗，直到选择中的新项目，则可以使用以下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');
    }
});

$ = 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为此：

请花时间正确缩进您的代码。没有人愿意阅读。制作一个jsfiddle？您确定您的整个脚本都在运行吗？它可能会因为第一行没有分号而抛出一个错误。请登录控制台。我是这样做的。一些人阅读50种灰色作为他们睡觉时的秘密爱好。我阅读unide不必判断。标记是什么样子的？对不起，我是jQuery新手，我甚至不确定正确的代码是什么样子……我可以让JSFIDLE保持不变。但是没有一个控制台是好的。