WordPress Javascript模式顯示無法關閉

Question

單擊div時，我有一個打開模式的函數。 它會打開，但是當我按X時不會關閉模態。 Display不會將值更改為none，但是我可以更改背景色和其他所有內容。

更新->因此，獲得正確的clasName和正確的模態ID，我仍然可以更改etc的整個模態背景，但是我不能更改顯示：塊值設置為none，我可以通過inspect更改為none，但是它不能通過選擇器。

我在自己的WordPress循環中使用它，我需要獲取帖子ID和模態ID（），以顯示正確的內容。

發現了問題。

因此，當我在控制台上記錄thisBtn事件並單擊“事件”時，會在控制台中得到該消息：1.按一下打開，我將顯示Block2。但是當我按X（關閉）時，我得到了一個無模型的var模型，此后立即單擊以打開火並使它再次阻止。 所以我的錯誤是X按鈕會同時觸發，而Im試圖找出原因。 報錯圖片

<div id="click-to-open<?php echo get_the_ID(); ?>" data-modal="<?php echo get_the_ID(); ?>" class="qodef-event-list-item-holder  <?php  echo get_the_ID(); ?>">

<?php echo prowess_core_get_shortcode_module_template_part('templates/parts/image', 'event-list'); ?>

<div class="qodef-event-list-item-content">
  <div class="qodef-event-list-item-content-holder">
    <div class="qodef-event-list-item-content-inner">
    <?php
    echo prowess_core_get_shortcode_module_template_part('templates/parts/category', 'event-list', '', $params);
    echo prowess_core_get_shortcode_module_template_part('templates/parts/title', 'event-list', '', $params);
    echo prowess_core_get_shortcode_module_template_part('templates/parts/excerpt', 'event-list', '', $params);
    //echo prowess_core_get_shortcode_module_template_part('templates/parts/info', 'event-list', '', $params);
    echo prowess_core_get_shortcode_module_template_part('templates/parts/read-more', 'event-list', '', $params);
    ?>
    </div>
  </div>
</div>
<!-- The Modal -->
<div id="<?php echo get_the_ID();?>" class="modal" >
<!-- Modal content -->
  <div class="modal-content" id="content<?php echo get_the_ID();?>" >
    <span id="close" class="close<?php echo get_the_ID();?>" data-modal="close">&times;</span>
    <p><?php the_content( 'Read more ...' ); ?></p>                                
  </div>

莫代爾

var btn = document.getElementsByClassName("<?php echo get_the_ID(); ?>");
  for (var i = 0; i < btn.length; i++) {
    var thisBtn = btn[i];
    thisBtn.addEventListener("click", function() {
      var modal1 = document.getElementById(this.dataset.modal);
      modal1.style.display = "block";  
    }, false);
}

克里祖卡斯

var span = document.getElementsByClassName("close<?php echo get_the_ID();?>");
// console.log(span)
  for (var b = 0; b < span.length; b++) {
    var click = span[b];
    click.addEventListener("click", function(){
      var modal = document.getElementById("<?php echo get_the_ID();?>");
      modal.style.display = 'none';
      console.log("modal", modal)
      console.log('modal style--->', modal.style);
    }, false);
}

Answer 1

答案照片

所以問題是我需要將其更改為true的事件偵聽器中的false值。 說明： https : //www.w3schools.com/js/js_htmldom_eventlistener.asp