jQuery/Javascript在點擊時添加/刪除這個類型

-2

<script> 
$(".image-popup").on('click', function() { 
     $(this).find(".myModal").addClass("modal-active"); 
     $(".modal-active").css("display", "block"); 
    }); 
$(".close").on('click', function() { 
     $(".modal-active").css("display", "none"); 
     var myVar = $(this).closest(".image-popup"); 
     myVar.find(".myModal").removeClass("modal-active"); 
     $(".modal-active").css("display","none"); 
    }); 
</script>

我試圖讓模態出現，然後消失，當我點擊關閉按鈕。問題是removeClass（）不起作用，「display」，「none」不會覆蓋第一個點擊函數。任何幫助？jQuery/Javascript在點擊時添加/刪除這個類型

來源

2017-07-07 seth randall

圖像配' - popup'內部'.close'？如果是這樣，請在close click回調函數中添加'evt'作爲參數，然後添加'evt.preventDefault（）;'以阻止事件冒泡DOM。 – War10ck

.close位於.image-popup –

從你的問題及以上您的評論我的猜測是，從你的第二個處理該事件被冒泡到你的第一個處理程序：

$(".image-popup").on('click', function() { 
    $(this).find(".myModal") 
     .addClass("modal-active") 
     .show(); 
}); 

$(".close").on('click', function(evt) { 
    evt.preventDefault(); 

    $(this).closest(".image-popup") 
     .find(".myModal") 
     .removeClass("modal-active"); 
     .hide(); 
});

儘量防止事件使用冒泡了.close處理程序evt.preventDefault();

來源

2017-07-07 16:02:33 War10ck

之內我試過這個，但它不起作用。當我檢查元素，然後單擊關閉按鈕時，它就像代碼一樣，但不能正確執行。 –

@sethrandall你能描述一下你的意思嗎？「......不會正確執行。」_？它是否在控制檯中拋出錯誤？ – War10ck

你可以用這個簡單的解決方案解決這個問題：

HTML

<div class="image-popup"> 
<div class="show-modal btn btn-success">Show Modal</div> 
    <div class="myModal"> 
    <div class="close btn btn-success">Close</div> 
    <p>My Modal is active</p> 
    </div> 
</div>

CSS

.modal-active .myModal{ 
    display: block; 
} 
.myModal{ 
    display:none; 
} 
.close{ 
    color:red; 
    display:block; 
}

$(function(){ 
    $('.show-modal').click(function(){ 
    $(this).parent().addClass('modal-active'); 
    }); 
    $('.close').click(function(){ 
    $(this).closest('.image-popup').removeClass('modal-active'); 
    }); 
});

看到這個搗鼓更多細節https://jsfiddle.net/a3yze54w/1/

來源

2017-07-07 16:04:58

jQuery/Javascript在點擊時添加/刪除這個類型

回答

相關問題