單擊鏈接時，使用鏈接的 ID 查找具有特定類的 div，該類與該鏈接中保存在數組中的 ID 相同

Question

我有一個數組，用於存儲從錨鏈接中獲取的 ID 並將它們應用於特定的 div。 我需要其 ID 已通過數組應用於 div 的鏈接，以便在單擊時打開該特定 div，該 div 用作疊加層/模態。 我在嘗試使用時被卡住了：

$('[id^="overlay-box-"]').click(function(){
    if ($('.overlay-box').hasClass($this)) {
        $('.overlay-box').fadeIn('slow');
    }
})

這不起作用。

Html 是：

<a class="overlay-open" href="#" id="overlay-box-one"></a>
<a class="overlay-open" href="#" id="overlay-box-two"></a>
<a class="overlay-open" href="#" id="overlay-box-three"></a>
<a class="overlay-open" href="#" id="overlay-box-four"></a>
<a class="overlay-open" href="#" id="overlay-box-five"></a>

這些 ID 存儲在一個數組中。 並通過此類應用於 div：

<div class="overlay-box"></div>
<div class="overlay-box"></div>
<div class="overlay-box"></div>
<div class="overlay-box"></div>
<div class="overlay-box"></div>

所以他們在頁面加載時輸出為：

<div class="overlay-box overlay-box-one"></div>
<div class="overlay-box overlay-box-two"></div>
<div class="overlay-box overlay-box-three"></div>
<div class="overlay-box overlay-box-four"></div>
<div class="overlay-box overlay-box-five"></div>

css是

// Overlay Box

.overlay-box {
    display: none;
    position: fixed;
}

.overlay-box {
    width: 100vw;
    height:100vh;
    //position:absolute;
    //top: 0%;
    //left: 0%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    overflow:visible;
    backdrop-filter: blur(4px);
    -o-backdrop-filter: blur(4px);
    -ms-backdrop-filter: blur(4px);
    -moz-backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

如前所述，我遇到的問題是，一旦單擊上面的錨鏈接之一以淡入與錨鏈接相關的特定 div，我就會將 Jquery/JS 寫入。

我目前的 JS 是：

var overlayarray = $('.overlay-open').map(function(i) {
    return this.id;
});

$( ".overlay-box" ).each(function( index ) {
  $(this).addClass(overlayarray[index]);
});

$('[id^="overlay-box-"]').click(function(){
    if ($('.overlay-box').hasClass($this)) {
        $('.overlay-box').fadeIn('slow');
    }
})

我知道最后一部分不起作用。

我也試過這個

$('.overlay-open').click(function(){

    $(this).each(function (i) {

        var currentId = $(this).attr('id');

        if ($('.overlay-box').hasClass(currentId)) {

            $('.overlay-box').fadeIn('slow');
        }

    });
    
});

也不起作用，當我使用以下內容時，它會打開所有 div

$('[id^="overlay-box-"]').click(function(){
    
    $('.overlay-box').fadeIn('slow');
    
});

Answer 1

你可以這樣做：

您可以直接在document.querySelector(".overlay-box." + a.id)使用 CSS 進行選擇，您可以在其中提取點擊鏈接的 id，並在選擇器中使用它：

當您單擊帶有 id 的鏈接時：

overlay-box-three

使用它，然后搜索帶有類的元素： .overlay-box.overlay-box-three

示例使用document.querySelector ：

 [...document.querySelectorAll("a.overlay-open")].forEach(a => { a.addEventListener('click', event => { event.preventDefault(); document.querySelector(".overlay-box." + a.id).style.display = "block"; console.clear(); console.log(a.id) }) });

 .overlay-box { display: none; }

 <div class="overlay-box overlay-box-one">overlay-box overlay-box-one</div> <div class="overlay-box overlay-box-two">overlay-box overlay-box-two</div> <div class="overlay-box overlay-box-three">overlay-box overlay-box-three</div> <div class="overlay-box overlay-box-four">overlay-box overlay-box-four</div> <div class="overlay-box overlay-box-five">overlay-box overlay-box-five</div> <a class="overlay-open" href="#" id="overlay-box-one">overlay-box-one</a> <a class="overlay-open" href="#" id="overlay-box-two">overlay-box-two</a> <a class="overlay-open" href="#" id="overlay-box-three">overlay-box-three</a> <a class="overlay-open" href="#" id="overlay-box-four">overlay-box-four</a> <a class="overlay-open" href="#" id="overlay-box-five">overlay-box-five</a>

並使用 jquery 修復您的最后一次嘗試：

$('[id^="overlay-box-"]').click(function(event){
    $('.overlay-box.'+this.id).fadeIn()
});

請注意，我們在單擊時使用this.id .click(function(event)傳遞了事件，因此我們稍后可以使用this.id獲取單擊元素的 id 並使用它選擇器。

 $('[id^="overlay-box-"]').click(function(event) { $('.overlay-box.' + this.id).fadeIn() });

 .overlay-box { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="overlay-box overlay-box-one">overlay-box overlay-box-one</div> <div class="overlay-box overlay-box-two">overlay-box overlay-box-two</div> <div class="overlay-box overlay-box-three">overlay-box overlay-box-three</div> <div class="overlay-box overlay-box-four">overlay-box overlay-box-four</div> <div class="overlay-box overlay-box-five">overlay-box overlay-box-five</div> <a class="overlay-open" href="#" id="overlay-box-one">overlay-box-one</a> <a class="overlay-open" href="#" id="overlay-box-two">overlay-box-two</a> <a class="overlay-open" href="#" id="overlay-box-three">overlay-box-three</a> <a class="overlay-open" href="#" id="overlay-box-four">overlay-box-four</a> <a class="overlay-open" href="#" id="overlay-box-five">overlay-box-five</a>