CODEWITHSUNDEEP
jqueryhtmlcss
Janath
Janath

Reputation: 1248

Switch between classes / jQuery

I have a login form with some input methods like drop downs, blank fields. My client needs a feature that select yes or no switch like this.

enter image description here

So I used jQuery add/remove functions when click.

HTML: 

<div class="form-group">
  <label for="member" class="col-md-5 col-sm-12 control-label">
    Do you have the car right now?
  </label>
  <div class="col-lg-10">
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch switch1 active"> <span class="goods">Yes</span>
      </button>
      <div class="btn-group">
        <button type="button" class="btn btn-default btn-switch switch1"><span class="services">No</span>
        </button>
      </div>
    </div>
  </div>
</div>

CSS:

.switch1.active{
  background: #e46a5d!important;
  color: #fff;
  font-weight: normal;
  text-shadow: none;
}

Here is a working link for jsfiddle But my problem is..

In some pages, I need to add more yes or no fields like 5 or 6. So I need to repeat jquery script more time.

So looking for a best practice to do in this kind of situation.

Upvotes: 1

Views: 169

Answers (2)

Satpal
Satpal

Reputation: 133403

You should wrap the button in same parent, as I think there is no benefit wrapping No button in another .btn-group

<div class="btn-group">
  <button type="button" class="btn btn-default btn-switch active"> <span class="goods">Yes</span>
  </button>
  <button type="button" class="btn btn-default btn-switch"><span class="services">No</span>
  </button>
</div>

Use a common class to attach the event handler i.e. .btn-switch, then use DOM relationship to remove the classes with the parent DOM structure.

 $(document).on("click", ".btn-switch", function() {
   var btnGroup = $(this).closest('.btn-group');
   btnGroup.find(".active").removeClass("active");

   //$(this).siblings(".active").removeClass("active");

   $(this).addClass("active");
 });

Fiddle

References

  1. .closest()
  2. .find()
  3. .siblings()

$(document).on("click", ".btn-switch", function() {
  var btnGroup = $(this).closest('.btn-group');
  btnGroup.find(".active").removeClass("active");
  $(this).addClass("active");
});
.btn-switch.active {
  background: #e46a5d!important;
  color: #fff;
  font-weight: normal;
  text-shadow: none;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group">
  <label for="member" class="col-md-5 col-sm-12 control-label">
    Do you have the car right now?
  </label>
  <div class="col-lg-10">
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch active"> <span class="goods">Yes</span>
      </button>
      <button type="button" class="btn btn-default btn-switch"><span class="services">No</span>
      </button>
    </div>
  </div>
</div>

<div class="form-group">
  <label for="member" class="col-md-5 col-sm-12 control-label">
    Do you have the car right now?
  </label>
  <div class="col-lg-10">
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch active"> <span class="goods">Yes</span>
      </button>
      <button type="button" class="btn btn-default btn-switch"><span class="services">No</span>
      </button>
    </div>
  </div>
</div>

<div class="form-group">
  <label for="member" class="col-md-5 col-sm-12 control-label">
    Do you have the car right now?
  </label>
  <div class="col-lg-10">
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch active"> <span class="goods">Yes</span>
      </button>
      <button type="button" class="btn btn-default btn-switch"><span class="services">No</span>
      </button>
    </div>
  </div>
</div>

Upvotes: 3

partypete25
partypete25

Reputation: 4413

Without changing your html structure you could simply replace your JS with this;

   $('.btn-switch').click(function() {
     var $group = $(this).closest('.form-group');
     $('.btn-switch', $group).removeClass("active");
     $(this).addClass("active");
   });

Upvotes: 4

Related Questions