Question

我有以下html：

<div class="showMap" id="mapVis" style="cursor:pointer">(Show map)</div>
<div id="map">hello world</div>

Div #map被隐藏，如下所示（这是隐藏它的原因，它有一个谷歌地图），然后我想点击(Show map)并显示div。还行吧。然后我更改#mapVis div的类和html，并希望下一次点击隐藏#map - 但它没有。老实说，我不知道它在做什么，但它好像忽略了新的类并恢复到行为，好像前一个类仍然附加到#mapVis div。

这是JQuery：

var map2 = $('#map');
map2.css('position','absolute').css('left','-9999em');

$('.showMap').click(function(){
    map2.hide().css('position','relative').css('left','0em').slideDown();
    $('#mapVis').removeClass('showMap').addClass('hideMap').html('(Hide map)');
});

$('.hideMap').click(function(){
    map2.css('position','absolute').css('left','-9999em');
    $('#mapVis').removeClass('hideMap').addClass('showMap').html('(Show map)');
});

Here's a fiddle

Answer 1

由于必须动态评估选择器，因此需要使用事件委派。

当您使用普通事件注册时，仅在事件注册时评估选择器，并且对元素所做的任何更改都不会反映在已注册的处理程序中。

var map2 = $('#map');
map2.css('position', 'absolute').css('left', '-9999em');
$(document).on('click', '.showMap', function () {
    console.log('hey2');
    $('#map').hide().css('position', 'relative').css('left', '0em').slideDown();
    $('#mapVis').removeClass('showMap').addClass('hideMap').html('(Hide map)');
});
$(document).on('click', '.hideMap', function () {
    console.log('hey');
    $('#map').hide();
    $('#map').css('position', 'absolute').css('left', '-9999em');
    $('#mapVis').removeClass('hideMap').addClass('showMap').html('(Show map)');
});

演示：Fiddle

Answer 2

jsfiddle：http://jsfiddle.net/7At32/

这是一个示例，但您可以修改您的要求

$('#mapVis').click(function () {
    if ($(this).hasClass("showMap")) {
        $('#map').show();
        $(this).removeClass('showMap').addClass('hideMap').html('(Hide map)');
    } else {
        $('#map').hide();
        $(this).removeClass('hideMap').addClass('showMap').html('(Show map)');
    }
});

更改类但单击无法识别新类

2 个答案: