单击链接时，使用链接的 ID 查找具有特定类的 div，该类与该链接中保存在数组中的 ID 相同

Question

I have an array that is storing ID's taken from Anchor links and applying them to specific divs. I need the link whose ID has been applied to the div through the array to when clicked open that specific div which is working as an overlay/modal. I am stuck as I am trying to use:

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

Which does not work.

The Html is:

<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>

These ID's are stored in an array. and applied to div's with this class:

<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>

So they output on page load as:

<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>

the css is

// 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);
}

As previously stated the issue I am having is writing the Jquery/JS to once one of the anchor links above are clicked to fade in the specific div the anchor link relates to.

My JS at the moment is:

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');
    }
})

Last part does not work I know.

I have also tried this

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

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

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

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

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

    });
    
});

Does not work also and when I use the below, it opens all divs

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

Answer 1

You can do it like this:

You do your selection with CSS directly inside document.querySelector(".overlay-box." + a.id) , where you extract id of clicked link, and use it in selector:

when you click link with id:

overlay-box-three

use that, then search for element with classes: .overlay-box.overlay-box-three

EXAMPLE using 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>

And to fix you last attempt using jquery:

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

Take note we passed event on click with .click(function(event) so we can later use this.id to get id of clicked element and use it selector.

 $('[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>