Using $(this) on a Shared Class Name for Three Images

JavaScript
1

Hey, guys. I’m trying to use $(this) to figure out how to make a user select an image to display the div class of “races” while all the images share the same div class name of, “race_box”. Each of them should have their own event, the first image is just .toggle(), the second is .slideToggle(), and the last is .fadeToggle(). I’ve been working on it for awhile now and I can’t seem to figure out how to make it work. I know how to make them display and make them go away, but only one should do that at a time.

My HTML:

        <div class="race_box">
	<img src="images/run1.jpg" /><br />
	<figcaption>5k/10k Events</figcaption>
		
            <div class="races" id="5k">
                <h3>5k/10 Events</h3>
                <ul>
                    <li>Mini Sprint</br>10/30/17</br>Memorial Park</br>Appleton</li>
                    <li>Iron Horse</br>11/06/17</br>Bay Beach Park</br>Green Bay</li>
                    <li>Twilight Trail</br>11/13/17</br>River's Edge Park</br>Wrightstown</li>
                </ul>
            </div><!--  End of '5k' div-->
        </div> <!-- End of 'run1' div-->
        
		<div class="race_box">
			<img src="images/run2.jpg" /><br />
			<figcaption>Half Marathon Events</figcaption>
		
            <div class="races" id="half">
                <h3>Half Marathon Events</h3>
                <ul>
                    <li>Fox River Marathon 10/15/17</br>Pierce Park</br>Appleton</li>
                    <li>N.E.W. Half Marathon 10/29/17</br>Bay Beach Park</br>Green Bay</li>
                    <li>Winnebago Run 11/27/17</br>Menominee Park</br>Oshkosh</li>
                </ul>
            </div> <!-- End of 'half' div-->
        </div><!-- End of 'run2' div-->
        
		<div class="race_box">
			<img src="images/run3.jpg" /><br />
			<figcaption>Full Marathon Events</figcaption>
		
        <div class="races" id="full">
            <h3>Full Marathon Events</h3>
            <ul>
                <li>Cheesehead Marathon 9/24/17</br>Pamperin Park</br>Green Bay</li>
                <li>Chain O'Lakes Marathon 10/29/17</br>Bay Beach Park</br>Green Bay</li>
                <li>Fox Cities Marathon 11/12/17</br>Menominee Park</br>Oshkosh</li>
            </ul>
        </div> <!-- End of 'full' div-->
        </div> <!-- End of 'run3' div-->

My jQuery/Javascript:

$(document).ready(function(){

$(".races").hide();

$("img").click(function(){
    
    $("#5k").toggle();
    $("#half").slideToggle();
    $("#full").fadeToggle();
    
});

});
2

Howdy, you could add a data attribute to each image indicating what should happen when it is clicked. E.g.

<img data-cb="fadeToggle" src="...">

Then:

$(".races").hide();

var callbacks = {
  toggle: function(el){ $(el).toggle(); },
  slideToggle: function(el){ $(el).slideToggle(); },
  fadeToggle: function(el){ $(el).fadeToggle(); }
}

$("img").click(function(){
  var cb = $(this).data("cb");
  var el = $(this).nextAll(".races")
  callbacks[cb](el);
});

Here’s an example you can run:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta chraset="utf-8">
    <title>Toggle effects</title>
  </head>
  <body>
    <div class="race_box">
      <img data-cb="toggle" src="https://placeimg.com/150/150/any"><br>
      <figcaption>
        5k/10k Events
      </figcaption>
      <div class="races" id="5k">
        <h3>5k/10 Events</h3>
        <ul>
          <li>Mini Sprint<br>
          10/30/17<br>
          Memorial Park<br>
          Appleton</li>
          <li>Iron Horse<br>
          11/06/17<br>
          Bay Beach Park<br>
          Green Bay</li>
          <li>Twilight Trail<br>
          11/13/17<br>
          River's Edge Park<br>
          Wrightstown</li>
        </ul>
      </div><!--  End of '5k' div-->
    </div><!-- End of 'run1' div-->
    <div class="race_box">
      <img data-cb="slideToggle" src="https://placeimg.com/150/150/any"><br>
      <figcaption>
        Half Marathon Events
      </figcaption>
      <div class="races" id="half">
        <h3>Half Marathon Events</h3>
        <ul>
          <li>Fox River Marathon 10/15/17<br>
          Pierce Park<br>
          Appleton</li>
          <li>N.E.W. Half Marathon 10/29/17<br>
          Bay Beach Park<br>
          Green Bay</li>
          <li>Winnebago Run 11/27/17<br>
          Menominee Park<br>
          Oshkosh</li>
        </ul>
      </div><!-- End of 'half' div-->
    </div><!-- End of 'run2' div-->
    <div class="race_box">
      <img data-cb="fadeToggle" src="https://placeimg.com/150/150/any"><br>
      <figcaption>
        Full Marathon Events
      </figcaption>
      <div class="races" id="full">
        <h3>Full Marathon Events</h3>
        <ul>
          <li>Cheesehead Marathon 9/24/17<br>
          Pamperin Park<br>
          Green Bay</li>
          <li>Chain O'Lakes Marathon 10/29/17<br>
          Bay Beach Park<br>
          Green Bay</li>
          <li>Fox Cities Marathon 11/12/17<br>
          Menominee Park<br>
          Oshkosh</li>
        </ul>
      </div><!-- End of 'full' div-->
    </div><!-- End of 'run3' div-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
      $(".races").hide();

      var callbacks = {
        toggle: function(el){ $(el).toggle(); },
        slideToggle: function(el){ $(el).slideToggle(); },
        fadeToggle: function(el){ $(el).fadeToggle(); }
      }

      $("img").click(function(){
        var cb = $(this).data("cb");
        var el = $(this).nextAll(".races")
        callbacks[cb](el);
      });
    </script>
  </body>
</html>
3

Thanks, Pullo. I did try changing the HTML, but I can only work with what I have. So I can’t change the HTML at all; I can only work from the JS file.

4

Just attach individual event listener then, I guess.

1 Like
5

Thank you, Pullo. I got it now.

6

Nice. What did you end up doing. I’m just curious.

7

xD
I actually ended up going the route of changing the HTML structure a little bit.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.