0

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.

Improve this question

3 Answers 3

Reset to default
1

In jquery try this:

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

Working Fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Suppose first user clicked on first name the active class selected again when user will click on 2nd one then that will have only active class from the 1st one it should remove.
yes. $('.active').removeClass('active'); would also work.
Please read my post again.I need like this item-exhibitationactive maploc after clicked.
Why is it so? Just asking
Don't mind, but this is senseless. Because this is only possible when you have a container for each a tag to add class on that, otherwise you have to add class on a itself
|
1 

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>

Improve this answer

4 Comments

No,Its not like this. the result class will be like this item-exhibitationactive maploc. Please see my post again.
I think you need this. please Check fiddle
Yes,its working but if each a tag will remain different div then what will be this $($this).siblings('a') line.Please check my updated post.
You can simply use $('a') instead of $($this).siblings('a')
0

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>

Improve this answer

3 Comments

Please check my post again.
I need like this item-exhibitationactive maploc. Please check my post again.
Its ugly, but it does what you ask.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.