CODEWITHSUNDEEP
javascriptjquery
user5443928
user5443928

Reputation:

How to add new class with existing class dynamically using Jquery/Javascript

I need one help. I need to add one new class along with the existing class using Jquery/Javascript. I am explaining my code below.

<div class="fynd-space-itms">
<div class="col-sm-3">
    <a href="javascript:void(0)" class="item-exhibitation maploc" onClick="keepSection();">Ram</a></div>
<div class="col-sm-3">
<a href="javascript:void(0)" class="item-parking maploc" onClick="keepSection();">Raj</a></div>
<div class="col-sm-3">
<a href="javascript:void(0)" class="item-offices maploc" onClick="keepSection();">Ray</a>
    </div>
</div>

Here I need when user will click on the onclick event one new class will add along with existing class. Suppose user clicked on Ram and after clicking the new class i.e-active will add and the total class name will be item-exhibitationactive maploc and same for others i.e-item-parkingactive maploc,item-officesactive maploc. At the same time from other anchor tag the active class will remove if it added before. Please help me.

Upvotes: 0

Views: 653

Answers (3)

RonyLoud
RonyLoud

Reputation: 2426

function keepSection($this){
var className=$($this).attr('class').replace('maploc','').replace(' ','');
var newclassName = className +'active';
//alert(className);
$('a').each(function(){
var theirClass= $(this).attr('class');
var patt = new RegExp("active");

if(patt.test(theirClass))
{
$(this).removeClass(theirClass);
var newCls = theirClass.replace('active','');
$(this).addClass(newCls);
}
});
$($this).removeClass(className);
$($this).addClass(newclassName);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-3">
<a href="javascript:void(0)" class="item-exhibitation maploc" onClick="keepSection(this);">Ram</a>
<a href="javascript:void(0)" class="item-parking maploc" onClick="keepSection(this);">Raj</a>
<a href="javascript:void(0)" class="item-offices maploc" onClick="keepSection(this);">Ray</a>
</div>
<div class="col-sm-3">
<a href="javascript:void(0)" class="item-exhibitation maploc" onClick="keepSection(this);">Ram1</a>
<a href="javascript:void(0)" class="item-parking maploc" onClick="keepSection(this);">Raj1</a>
<a href="javascript:void(0)" class="item-offices maploc" onClick="keepSection(this);">Ray1</a>
</div>

Upvotes: 1

JohnV
JohnV

Reputation: 59

If you are trying to have differant active states for the items, you can just use

Sorry, first answer, have updated with snippet

$('.maploc').click(function(e){
  e.preventDefault();
  // Save DOM element to a var for speed.
	var self = $(this),
      // Get the first class name from the attr
  		active = self.attr('class').split(" ")[0],
      // Set inactive to be the same as active
      inactive = active;
      // Remove maploc class so we only have 1 class left to work with
      self.removeClass('maploc');
      // Is active already active?
      if(active.match(/active/g)) {
        // YES : Remove active from the class
      	inactive = active.replace(/active/,'');
      } else {
        // NO : Append active to the class
      	active = active+'active';
      }
      // Toggle between active and inactive
  		self.toggleClass(active +" "+ inactive);
      // Append maploc back into the class attr
      self.addClass('maploc');
      
      // Next line not needed.
      $('#class').text(self.text() + '=' + self.attr('class'));
});
.item-exhibitationactive{
  color:red;
}
.item-parkingactive {
  color:yellow;
}
.item-officesactive {
  color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-3">
<a href="#" class="item-exhibitation maploc">Ram</a>
<a href="#" class="item-parking maploc">Raj</a>
<a href="#" class="item-offices maploc">Ray</a>
</div>

<div><b>Current Class:</b> <span id="class"></span>

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

In jquery try this:

$('.maploc').click(function(){
  $('.maploc').removeClass('active');  // to remove already added class
  $(this).addClass('active');
});

Working Fiddle

Upvotes: 1

Related Questions