更改类，但单击不识别新类

Change class but click not recognizing the new class

本文关键字：识别 新类 单击      更新时间：2023-09-26

我有以下html:

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

Div #map被隐藏，如下所示（这样隐藏是有原因的，它保存着一个谷歌地图），然后我想点击(Show map)，Div就会出现。这没关系。然后我更改#mapVisdiv的类和html，并希望下一次单击隐藏#map，但它没有。老实说，我不知道它在做什么，但它似乎忽略了新的类，并恢复到操作，就好像以前的类仍然附加到#mapVis分区一样。

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

这是一个小提琴

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

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

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

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)');
    }
});
相关文章：