JavaScript“關閉按鈕”不起作用

Question

今天，我嘗試使javaScript中的最簡單的關閉按鈕。 不幸的是，它不起作用。 它是這樣的：

<div id="popup_bg">
<div id="popup_window">
<span id="popup_close">
</span>
</div>
</div>

js代碼是：

<script type=”text/javascript”>
        $("#popup_close").click(function() {
        $("#popup_bg").fadeOut();
        event.stopPropagation();
        });
</script>

我也想將其應用於任何這些“彈出窗口”，因此我可能會將其更改為類似$（this..parent（）。parent（）。fadeOut（）;的東西）。 -可以這樣做嗎？

感謝您的幫助！ :)

@編輯

由於您的解決方案均無法正常工作，因此我將按字面意思放置代碼：D也許您會發現一些錯誤，使其出錯：

<?php if(isset(errors['user'])) : ?>    
<script type="text/javascript">
    $(function()
    {
        $("#popup_close").on('click', function() {
        $("#popup_background").fadeOut();
        //event.stopPropagation();
        });
    });
</script>
<div id="popup_background" >
    <div class="popup_window">
        <span class="title">
        error
        </span>
        <span class="message"><?php echo errors['user']; ?>
        </span>
        <span id="popup_close" class="button">OK</span>
    </div>
</div>
<?php endif; ?>

希望這可以幫助您發現任何錯誤。 它正確顯示，我單擊“確定”范圍，沒有任何反應：p我討厭js：D

Answer 1

ID必須唯一，而應使用類：

<div class="popup_bg">
   <div class="popup_window">
      <span class="popup_close"></span>
   </div>
</div>

然后，為了選擇所單擊元素的目標父級，可以使用closest方法：

$(function() { 
    $(".popup_close").click(function(event) {
       $(this).closest(".popup_bg").fadeOut();
       // event.stopPropagation();
    });
});

請注意，在undefined代碼event情況undefined ，應將事件對象傳遞給處理程序。

Answer 2

添加document.ready和/或使用.on函數

<script type=”text/javascript”>
    $(function(){
        $("#popup_close").on('click', function() {
            $("#popup_bg").fadeOut();
            event.stopPropagation();
        });
    });
</script>

另外，ID可能不會在您的文檔中重復，請使用其他選擇器，例如class

Answer 3

我看到了您的代碼，該代碼的jquery部分正在運行。請檢查此處：Jsfiddle-> http://jsfiddle.net/Zahinize/7YD4D/13/

您應該這樣重寫條件If語句，

 <? ini_set('error_reporting', E_ALL); ?>

 <script type="text/javascript">
  $(function()
  {
    $("#popup_close").on('click', function() {
    $("#popup_background").fadeOut();
    //event.stopPropagation();
    });
   });
  </script>

 <div id="popup_background" >
  <div class="popup_window">
    <span class="title">
    error
    </span>
    <span class="message">

    <?php 
     if(isset(errors['user'])){      
      echo errors['user']; 
      }
    ?>
     </span>
    <span id="popup_close" class="button">OK</span>
  </div>
</div>

在頂部設置error_reporting。

在此處查看更多信息： http : //php.net/manual/en/function.error-reporting.php

也許這會有所幫助，但是坦率地說，我還沒有看到這樣的錯誤處理： error ['user']在任何地方..您應該看到錯誤處理以編寫更好的代碼;）

Answer 4

如果彈出框不止一個，則最好使用class而不是id。

例。

$(function()
{
    $(".popup_close").on('click',(function()
    {
        $(this).parents("div.popup_bg").fadeOut();
    });
});

和HTML

<div class = "popup_bg">
    <div class = "popup_window">
        <span class = "popup_close"></span>
    </div>
</div>

Answer 5

您需要在您的跨度或設置高度以及范圍內添加一些內容。 然后，您將可以單擊它，它將起作用。 避免使用parent().parent()技巧，如果更改div結構，這可能會中斷。 正如其他人所說的，如果您打算重用代碼（請閱讀CSS教程），請准備好jquery文檔（閱讀教程），並使用類而不是ids ...