onClick Event Listener inside a while

Question

enter code here

classesFilterWerke = [
        'skulptur',
        'malerei',
        'druck',
        'neueMedien',
        'sozialkritischs',
        'performance',
        'installation',
        'kunstImÖffentlichenRaum'
    ];

    for( var i = 0; i < classesFilterWerke.length; i++ ) {
        iNthChild = i+2
        $('.werke-filter button:nth-child('+ iNthChild +')').click(function(){
            $('.'+ classesFilterWerke[i] +'').toggle();
        })
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="werke-filter filter-wrapper">
    <p class="float-left">Filter:</p>
    <button class="active btn btn-primary-outline">Skulptur</button>
    <button class="active btn btn-primary-outline">Malerei</button>
    <button class="btn btn-primary-outline">Druck</button>
    <button class="btn btn-primary-outline">Neue Medien</button>
    <button class="btn btn-primary-outline">Sozialkritisches</button>
    <button class="btn btn-primary-outline">Performance</button>
    <button class="btn btn-primary-outline">Installation</button>
    <button class="btn btn-primary-outline">Kunst im öffentlichen Raum</button>
</div>

<a href="werk-baldachin.php?id=8" class="karte skulptur" data-aos="fade-up">
            <div class="karte-img">
                <img src="../assets/img/werke/thumb-skulptur-longboard.jpg" alt="">
            </div>
            <div class="stroke-bottom"></div>
            <h4>Longboard</h4>
            <h5>Skulptur</h5>
        </a>

        <a href="werk-baldachin.php" class="karte druck" data-aos="fade-up">
            <div class="karte-img">
                <img src="../assets/img/werke/thumb-skulptur-schale.jpg" alt="">
            </div>
            <div class="stroke-bottom"></div>
            <h4>Keramikton Arbeiten</h4>
            <h5>Skulptur</h5>
        </a>

        <a href="werk-baldachin.php" class="karte malerei" data-aos="fade-up">
            <div class="karte-img">
                <img src="../assets/img/werke/thumb-skulptur-stehleuchte.jpg" alt="">
            </div>
            <div class="stroke-bottom"></div>
            <h4>Stehleuchte</h4>
            <h5>Skulptur</h5>
        </a>

I want to make a filter which toggles elements with a certain class. My problem now is that if I use the jQuery .click Event Listener inside a while loop it doesn't work. If I get the jQuery statement outside of the while loop it works.

NOTE: I haven't used the i variable and the classesFilterWerke (Array) inside the loop because it doesn't work even without.

You need to provide a [mcve]. Here you have a bunch of variables you've never defined and are operating on some HTML you haven't shared. Use the live demo feature of the question editor. — Quentin, May 13 '20 at 13:30
We need to see a working example including all relevant HTML and CSS in order to help you. However, from this example I can tell you that putting an event handler in a loop is not a good idea — Rory McCrossan, May 13 '20 at 13:31
Given that you're using `.toggle` inside the click event, you're probably calling the .click event setup multiple times so nothing *appears* to happen. If you toggle twice it resets. Add a `console.log` (as basic debugging) *inside* the click event handler to see how many times it's being called. — freedomn-m, May 13 '20 at 13:34
Do you realize it keeps calling toggle on all elements? So each iteration it is going to select all, show them, next, select all, hide them, select all/show, select all/hide, etc. — epascarello, May 13 '20 at 13:34
Yep - you have 8 items, so you're defining 8 click events so toggling 8 times so not actually doing anything. I assume you're seeing if it "works" by looking at the UI - don't; use the browser debugger — freedomn-m, May 13 '20 at 13:36
Now you have the infamous loop problem. https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — epascarello, May 13 '20 at 17:26
Are you able to alter this code and add an attribute? It can be simplified. — epascarello, May 13 '20 at 17:28
I've updated it again but it doesn't work with: https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example. — raphy02, May 13 '20 at 17:38

score 2 · Accepted Answer · answered May 13 '20 at 17:40

Relying on index is not the best thing. Your code already had things out of order so it would have a bug. So if you add an attribute we can simplify this code to just select that element.

I am not sure the end goal so I am just toggling a class to show it working.

$('.werke-filter').on("click", "button", function () {
  var button = $(this)
  var toggles = button.data("toggles")
  button.toggleClass("selected")
  $(toggles).toggleClass("selected")
})

.selected {
  background-color: yellow;
}

.karte {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="werke-filter filter-wrapper">
  <p class="float-left">Filter:</p>
  <button class="active btn btn-primary-outline" data-toggles=".karte.skulptur">Skulptur</button>
  <button class="active btn btn-primary-outline" data-toggles=".karte.malerei">Malerei</button>
  <button class="btn btn-primary-outline" data-toggles=".karte.druck">Druck</button>
</div>

<a href="werk-baldachin.php?id=8" class="karte skulptur" data-aos="fade-up">
  <div class="karte-img">
    <img src="../assets/img/werke/thumb-skulptur-longboard.jpg" alt="">
  </div>
  <div class="stroke-bottom"></div>
  <h4>Longboard</h4>
  <h5>Skulptur</h5>
</a>

<a href="werk-baldachin.php" class="karte druck" data-aos="fade-up">
  <div class="karte-img">
    <img src="../assets/img/werke/thumb-skulptur-schale.jpg" alt="">
  </div>
  <div class="stroke-bottom"></div>
  <h4>Keramikton Arbeiten</h4>
  <h5>Skulptur</h5>
</a>

<a href="werk-baldachin.php" class="karte malerei" data-aos="fade-up">
  <div class="karte-img">
    <img src="../assets/img/werke/thumb-skulptur-stehleuchte.jpg" alt="">
  </div>
  <div class="stroke-bottom"></div>
  <h4>Stehleuchte</h4>
  <h5>Skulptur</h5>
</a>

Thanks for this simple solution. I appreciate it! – raphy02 May 13 '20 at 17:48 — raphy02, May 13 '20 at 17:48

onClick Event Listener inside a while

1 Answers1