CODEWITHSUNDEEP
javascriptjqueryhtml
James
James

Reputation: 479

Dynamically determine which button of a particular class has been clicked with jquery

A demo of my dilemma here

Let's say I have the following html:

<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <body>
    <div class="main" id="thingSection">
      <h1>
        Test Header
      </h1>
      <button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
      <div class="content" id="content1">
        Some content
      </div>
    </div>
    <hr />
    <div class="main" id="thingSection1">
      <h1>
        Another Test
      </h1>
      <button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
      <div class="content" id="content2">
        Some content
      </div>
    </div>
    <hr>
    <div class="main" id="thingSection2">
      <h1>
        Another test, you say?
      </h1>
      <button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
      <div class="content" id="content3">
        Some content
      </div>
    </div>
  </body>

</html>

I am using the following jquery to change the toggle icon from FontAwesome from off to on:

$(function() {
  $('.btn-icon').click(function() {
    if ($(this).find($(".fa")).hasClass('fa-toggle-off')) {
      $("i.fa-toggle-off").toggleClass('fa-toggle-on');
    } else {
      $("i.fa-toggle-on").toggleClass('fa-toggle-off');
    }
  });
});

When I click the button to toggle the icon, it works as expected, i.e. it changes all of the buttons on the page. However, I would like to dynamically determine which button has been pressed, and then change the content of a child div based on the position of the switch.

I want to avoid hardcoding id's for each button to avoid a ton of if/else statements in the script that must be updated each time I, say, add a new button or a new section. That is to say, I want to dynamically detect which button has been pressed, and affect only that button and its children.

I've noticed that console.log(this) yields only the HTML for the particular button that has been pressed, not all of the buttons.

I'm a novice with jquery. I haven't been able to find a solution to this problem yet, and I feel like there has to be a way to do this dynamically without hardcoding IDs.

EDIT: I've accomplished (partially) what I want to do with the following code:

$(function() {

    $('.btn-icon').click(function() {
        var t = $(this).find('.is-toggle');

        if (t.hasClass('fa-toggle-off')) {
            t.addClass('fa-toggle-on');
            t.removeClass('fa-toggle-off');
        }
        else {

            t.addClass('fa-toggle-off');
            t.removeClass('fa-toggle-on');
        }
    });

});

Looks like I just didn't understand what exactly $(this) was (:

Upvotes: 2

Views: 87

Answers (1)

CumminUp07
CumminUp07

Reputation: 1978

All you need is $(this) that selects the element that triggered the event. From there you can select down to the div you want.

EDIT: Here is how that might look in code, I pulled this from your fiddle and edited it

$(function() {
  $('.btn-icon').click(function() {
    $(this).children('.fa-toggle-off, .fa-toggle-on').toggleClass('fa-toggle-on fa-toggle-off');
  });
});

Upvotes: 3

Related Questions