Question

我需要一个帮助。我需要使用Jquery / Javascript添加一个新类以及现有类。我在下面解释我的代码。

<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>

这里我需要用户点击onclick事件时，一个新类将与现有类一起添加。假设用户点击了Ram，点击新课程i.e-active后会添加，总课程名称将为item-exhibitationactive maploc，而其他人i.e-item-parkingactive maploc,item-officesactive maploc则相同。与其他锚标记同时，如果之前添加了活动类，它将被删除。请帮帮我。

Answer 1

在jquery中试试这个：

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

Working Fiddle

Answer 2

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>

Answer 3

如果您尝试为项目设置不同的活动状态，则可以使用

抱歉，第一个回答，已更新了代码段

＆＃13;

$('.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'));
});

＆＃13;

.item-exhibitationactive{
  color:red;
}
.item-parkingactive {
  color:yellow;
}
.item-officesactive {
  color:green;
}

＆＃13;

<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>

＆＃13;

如何使用Jquery / Javascript动态添加现有类的新类

3 个答案: