Question

我有不同id的可变元素，并希望将id名称与A标记上的类匹配，然后将类切换为a标记`

    <a id="AB" href="" class="divone marker"><span>This is ab</span></a>
    <a id="ABA" href="" class="divtwo marker"><span>This is aba</span></a>
    <a id="ABAB" href="" class="divthree marker"><span>This is abab</span></a>

<div id="divone"></div>
<div id="divtwo"></div>
<div id="divthree"></div>

当我将鼠标悬停在div上时，它会获取ID，然后将其与标记上的类匹配，并将类添加为活动状态，当我将鼠标移除时，它将删除该类

我希望这是有道理的，任何帮助都会非常感激

提前致谢丹

Answer 1

我将div包装在另一个容器中以便于访问。

$('#container > div').on('mouseenter', function(){
    var $el = $('.' + $(this).attr('id'));
    $el.addClass('active');
});
$('#container > div').on('mouseleave ', function(){
    var $el = $('.' + $(this).attr('id'));
    $el.removeClass('active');
});

https://jsfiddle.net/s9628o2y/

Answer 2

你可以用jQuery这样做。

$('a').on('mouseenter', function() {
  var classList = $(this).attr('class').split(/\s+/);
  $.each(classList, function(index, classname) {
    $('#' + classname).addClass('active');
  });
});

$('a').on('mouseleave', function() {
  var classList = $(this).attr('class').split(/\s+/);
  $.each(classList, function(index, classname) {
    $('#' + classname).removeClass('active');
  });
});

.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="AB" href="" class="divone marker"><span>This is ab</span></a>
<a id="ABA" href="" class="divtwo marker"><span>This is aba</span></a>
<a id="ABAB" href="" class="divthree marker"><span>This is abab</span></a>
<br />
<div id="divone">one</div>
<div id="divtwo">two</div>
<div id="divthree">three</div>

Answer 3

您可以使用jQuery.hover()

http://jsfiddle.net/4snhdpx1/6/

$('div').hover(function(event) {
    if (event.type == 'mouseenter') {
        $('.' + this.id).addClass('active');
    } else {
        $('.' + this.id).removeClass('active');
    }
});

只是为了好玩，你可以使用更短的代码：）

http://jsfiddle.net/4snhdpx1/8/

$('div').hover(function(e) {
    $('.' + this.id)[e.type == 'mouseenter' ? 'addClass' : 'removeClass']('active');
})

我可以使用jquery / js将类添加到悬停的其他元素

3 个答案: