How to loop selectors?

Question

I am having a problem making this work. I know there is a solution for this problem, I think I solved it before, but I don't remember how. So..

I have JQuery code

$("#button-video").click(function () {
    $("#image").addClass("show");
    $("#image").removeClass("hide");
    $("#video").addClass("hide");
    $("#video").removeClass("show");
    $("#button-gallery").removeClass("active");
    $("#button-video").addClass("active");
});
$("#button-gallery").click(function () {
    $("#video").addClass("show");
    $("#video").removeClass("hide");
    $("#image").addClass("hide");
    $("#image").removeClass("show");
    $("#button-video").removeClass("active");
    $("#button-gallery").addClass("active");
});

HTML code

<div class="goods-image">
    <a href="" data-lightbox="picture">
        <div class="box" id="image">
            <img src="" alt="product">
            <div class="hover-eye">

            </div>
        </div>
    </a>
    <div class="box hide" id="video">
        <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=1">
        </iframe>
    </div>
    <div class="image-box">
        <div class="gallery active" id="button-video">
            <p>Galerija</p>
        </div>
        <div class="video" id="button-gallery">
            <p>Video</p>
        </div>
    </div>
</div>

There are multiple ids like #button-video_1, #video_1, #image_1, #button-video_2, #video_2, #image_2 and so on. Every one of them does the same thing, but for different picture or video. Because the list is long, how to make this code (above) work for all elements withouth copying and adding a number?

you could give them all the same CSS class, select using that and bind a click event to it, and then the same code can be executed no matter which element was clicked. You might want to ensure you don't have duplicate IDs, and if you want to find specific elements which are logically associated with a particular instance of the button, then you could use things like siblings, or closest, or find (e.g. within a parent container) to narrow down your search. — ADyson
– ADyson, Commented Oct 19, 2018 at 13:04
P.S. if you solved it before, you could always go and look at that code to see what you did? You did keep a copy, right? — ADyson
– ADyson, Commented Oct 19, 2018 at 13:08

duncan · Accepted Answer · 2018-10-19 13:13:17Z

4

You should be able to do things like:

$("div[id^='button-video_']").click(function () {
    var id = this.id.replace('button-video_', '');
    $("#image_" + id).addClass("show").removeClass("hide");
    $("#video_" + id).addClass("hide").removeClass("show");
    $("#button-gallery_" + id).removeClass("active");
    $(this).addClass("active");
});

$("div[id^='button-gallery_']").click(function () {
    var id = this.id.replace('button-gallery_', '');
    $("#video_" + id).addClass("show").removeClass("hide");
    $("#image_" + id).addClass("hide").removeClass("show");
    $("#button-video_" + id).removeClass("active");
    $(this).addClass("active");
})

Using the [^=...] to get selectors that start with that string, see :

https://api.jquery.com/attribute-starts-with-selector/

And chaining a couple of them together, e.g.

$("#image_" + id).addClass("show").removeClass("hide")

edited Oct 19, 2018 at 13:13

answered Oct 19, 2018 at 13:07

duncan

32k15 gold badges84 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to loop selectors?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related