Изменить класс, но нажмите, не распознавая новый класс

Question

Изменить класс, но нажмите, не распознавая новый класс

0

У меня есть следующий html:

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

Div #map скрыт, как показано ниже (есть причина скрывать его таким образом, он содержит карту google), затем я хочу щелкнуть (Show map) и появится div. Хорошо. Затем я меняю класс и html div #mapVis и хочу, чтобы следующий щелчок скрывал #map но это не так. Честно говоря, я не знаю, что он делает, но как будто он игнорирует новый класс и возвращается к действиям, как будто предыдущий класс все еще привязан к div #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)');
});

Здесь скрипка

Darren Sweeney 17 дек. 2013, в 18:28

Источник

0

Вы не определили jQuery в своей скрипке.
Jako 17 дек. 2013, в 17:17
0

Ваша проблема заключается в том, что вы связываете событие click с элементом dom, и после этого вы изменяете его класс, событие уже связано, вам нужно перепривязать событие или проверить значение класса, прежде чем делать что-либо
Charaf JRA 17 дек. 2013, в 17:27

Теги:

javascript

jquery

click

2 ответа

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

patel.milanb 17 дек. 2013, в 15:52

Ещё вопросы

Вы не определили jQuery в своей скрипке.
Ваша проблема заключается в том, что вы связываете событие click с элементом dom, и после этого вы изменяете его класс, событие уже связано, вам нужно перепривязать событие или проверить значение класса, прежде чем делать что-либо

Arun P Johny · Accepted Answer · 2013-12-17T15-26-00.000Z

Поскольку ваши селекторы должны оцениваться динамически, вам необходимо использовать делегирование событий.

Когда вы используете обычную регистрацию событий, селекторы оцениваются только во время регистрации события, и любые изменения, сделанные в элементе, не будут отображаться в зарегистрированных обработчиках.

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

Демо: скрипка