CODEWITHSUNDEEP
javascriptjquery
TinyTiger
TinyTiger

Reputation: 2111

I cannot call my jQuery function

I created a jQuery function that adds and removes a class when clicking on a button.

The grey background will change depending on which button you click because I am adding and removing the active-button class each time.

/* Add / remove the active button class */
jQuery(document).ready(function() {

  jQuery('.sm-btn-right').click(function() {
    jQuery('.sm-btn-right').addClass('active-button');
    jQuery('.sm-btn-left').removeClass('active-button');
  });

  jQuery('.sm-btn-left').click(function() {
    jQuery('.sm-btn-left').addClass('active-button');
    jQuery('.sm-btn-right').removeClass('active-button');
  });

});
.sm-btn-left {
  color: red;
}

.sm-btn-right {
  color: blue;
}

.active-button {
  background-color: #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>

<div class="server-location-button-wrap">
  <div class="sm-btn-left flag-map-btns map_btn active-button">
    Map
  </div>
  <div class="sm-btn-right flag-map-btns flags_btn">
    List
  </div>
</div>

Then I realised I needed similar functionality for some other buttons, so I decided to turn it into a reusable function that I could call when needed. But when I do that the function stops working, the active-button class does not change.

Here is my (broken) attempt at separating it out into it's own reusable function.

/* Add / remove class */
function bgAddRemoveClass(elem1, elem2, theClassNoDot) {

  jQuery('elem1').click(function() {
    jQuery('elem1').addClass('theClassNoDot');
    jQuery('elem2').removeClass('theClassNoDot');
  });
  jQuery('elem2').click(function() {
    jQuery('elem2').addClass('theClassNoDot');
    jQuery('elem1').removeClass('theClassNoDot');
  });

}

/* Invoke the function */
jQuery(document).ready(function() {
  bgAddRemoveClass('.sm-btn-left', '.sm-btn-right', 'active-button');
});
.sm-btn-left {
  color: red;
}

.sm-btn-right {
  color: blue;
}

.active-button {
  background-color: #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>

<div class="server-location-button-wrap">
  <div class="sm-btn-left flag-map-btns map_btn active-button">
    Map
  </div>
  <div class="sm-btn-right flag-map-btns flags_btn">
    List
  </div>
</div>

What am I doing wrong?

Upvotes: -1

Views: 52

Answers (3)

Fuong Lee
Fuong Lee

Reputation: 195

I mean that you pass wrong parameters in add/remove Class function, use the name of inner parameter instead of using class name. Try call the function like this way:

bgAddRemoveClass(elem1, elem2, 'someClass');

then:

jQuery(elem1).addClass(someClass);
jQuery(elem2).removeClass(someClass);

Upvotes: 0

kiranvj
kiranvj

Reputation: 34147

Remove quotes, you need variables not strings

jQuery(elem1).click(function() {
    jQuery(elem1).addClass(theClassNoDot);
    jQuery(elem2).removeClass(theClassNoDot);
  });

Upvotes: 4

EmandM
EmandM

Reputation: 960

Remove the quotes around elem1, elem2 and theClassNoDot inside the bgAddRemoveClass() function. By adding quotes you are not using the values that are passed into the function and instead are passing 'elem1' and 'elem2' as values to jQuery.

/* Add / remove class */
function bgAddRemoveClass(elem1, elem2, theClassNoDot) {

  jQuery(elem1).click(function() {
    jQuery(elem1).addClass(theClassNoDot);
    jQuery(elem2).removeClass(theClassNoDot);
  });
  jQuery(elem2).click(function() {
    jQuery(elem2).addClass(theClassNoDot);
    jQuery(elem1).removeClass(theClassNoDot);
  });

}

/* Invoke the function */
jQuery(document).ready(function() {
  bgAddRemoveClass('.sm-btn-left', '.sm-btn-right', 'active-button');
});
.sm-btn-left {
  color: red;
}

.sm-btn-right {
  color: blue;
}

.active-button {
  background-color: #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>

<div class="server-location-button-wrap">
  <div class="sm-btn-left flag-map-btns map_btn active-button">
    Map
  </div>
  <div class="sm-btn-right flag-map-btns flags_btn">
    List
  </div>
</div>

Upvotes: 1

Related Questions