如何關閉車把中的模板模式？

Question

我創建了一個應用程序來接收來自新聞 API 的文章。 每篇文章都顯示在一張卡片中，卡片上有一個“打開模式”按鈕。 此按鈕打開一個模式，其中包含與每篇文章相關的唯一信息。

但是，一旦打開模式，我就無法關閉它。 我懷疑這是因為模態卡在這個 state: modals.forEach((modal, index) => {modal.classList.toggle('open', index === openIndex);

這是我當前的代碼：

 {{!-- #each article --}}
    <div class="row">
        {{#each articles}}
        
        <div class="col-12-sm col-6-md col-3-lg">
            <div class="card m-2">
                <div class="card-body">
                <h5 class="card-title">{{title}}</h5>
                <p class="card-text">{{description}}</p>
                </div>
                <img class="card-image" src="{{urlToImage}}" alt="Card image cap">
                <button data-open-modal="{{@index}}">Open Modal</button>
                        
            </div>
        </div>
        {{/each}}
    </div>
</div>


{{#each articles}}
 
    <!-- The Modal -->
    <div class="modal closed" id="Modal_{{@index}}">
        <!-- Modal content -->
        <div class="modal-content">
            <span id="spm" class="close" >&times;</span>
            <h2>{{title}}</h2>
            <img src="{{urlToImage}}" alt="">
            <p>{{content}}</p>
        </div>
    </div>

{{/each}}


<script>

    //Store all modals and modal buttons in variables
    const openModalButtons = document.querySelectorAll('[data-open-modal]');
    const modals = document.querySelectorAll('.modal');

    //Loop through all modal buttons and assign handler to each
    openModalButtons.forEach(openModalButton => {
        openModalButton.addEventListener('click', (event) => {
            //Get index value from number clicked
            const openIndex = Number(event.target.dataset.openModal); //Access dataset attribute to read and write
            
    //Loop over each modal. 
    //Set modal class to open if index is equal to wanted index
    modals.forEach((modal, index) => {
        modal.classList.toggle('open', index === openIndex);
        modal.classList.toggle('closed', index !== openIndex);
    });
  });
});

</script>

這是我嘗試添加到腳本中的內容：（它沒有給出錯誤但什么也沒做）

const span = document.querySelectorAll('.close');

let spanArr = Array.prototype.slice.call(span);
    
    spanArr.forEach(spanArr => {
        spanArr.addEventListener('click', (event) => {
            const closeIndex = Number(event.target.dataset.closeModal); 

            spanArr[closeIndex].forEach(span => {
                span.onclick = function() {
                    modal.style.display = "none";
                }
            });  
        });
    });

我還嘗試將事件偵聽器添加到跨度，但我無法使其工作。 我是初學者，這是我第一次使用車把，所以感謝您的任何見解！

Answer 1

這里有一些問題可能是由於我在https://stackoverflow.com/a/73738690/3397771中沒有解釋。

一、 const openIndex = Number(event.target.dataset.openModal);的原因有效是因為在每個“打開”按鈕上定義了一個名為data-open-modal的數據屬性。 正是我們使用dataset.openModal引用的數據屬性，我們將返回的值是屬性中等號右側的值，即{{@index}}部分。

但是，對於我們這里的目的，數據屬性方法可能過於復雜。 或者，我們可以使用在forEach循環中獲得的index來迭代地添加我們的點擊事件監聽器。

接下來，在我們的點擊處理程序中不需要spanArr[closeIndex].forEach(...循環spanArr - 盡管它的名字 - 不是 arr(ay)；它是單個span元素。

更新后的代碼變為：

const span = document.querySelectorAll('.close');

span.forEach((spanArr, index) => { 
  spanArr.addEventListener('click', () => {
    modals[index].style.display = "none";
  });
});

注意：我保留了我找到的變量的名稱，但它們可以而且應該改進。 例如， span沒有傳達這些元素的目的是什么，或者就此而言，它是一個集合。 closeButtons會是一個更好的名字。 事實上，表現得像按鈕的元素應該使用<button>元素，而不是<span> ，以便在語義上正確且可訪問。

我創造了一個新的小提琴。