鼠标上的jQuery目标与类相同的id

Question

我试图在#照片菜单里的鼠标切换时向#photo li添加活动类。

$('#photo-menu li').on('mouseenter mouseleave', function(){
        var pClass = this.className;
        var pId = ('#photo-desc li').id;
        if (pClass == pId) {$('#photo-desc li').addClass('active');}
   });

<ul id="photo-menu">
    <li class="photo-1"><a href="">Photo 1</a></li>
    <li class="photo-2"><a href="">Photo 2</a></li>
    <li class="photo-3"><a href="">Photo 3</a></li>
    <li class="photo-4"><a href="">Photo 4</a></li>
</ul>

<ul id="photo-desc">
    <li id="photo-1">Photo 1</li>
    <li id="photo-2">Photo 2</li>
    <li id="photo-3">Photo 3</li>
    <li id="photo-4">Photo 4</li>
</ul>

Answer 1

在您的示例中，第二个类具有与id同名的类。所以很简单：

​

$('#photo-menu li').on('mouseenter mouseleave', function (e) {
    var curClass = $(this).attr("class"); //take class
    if (e.type == "mouseenter") {
        $("#" + curClass).addClass("active"); //use class name to get the id in second list
    } else {
        $("#" + curClass).removeClass("active");
    }
});

.active {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="photo-menu">
    <li class="photo-1"><a href="">Photo 1</a>

    </li>
    <li class="photo-2"><a href="">Photo 2</a>

    </li>
    <li class="photo-3"><a href="">Photo 3</a>

    </li>
    <li class="photo-4"><a href="">Photo 4</a>

    </li>
</ul>
<ul id="photo-desc">
    <li id="photo-1">Photo 1</li>
    <li id="photo-2">Photo 2</li>
    <li id="photo-3">Photo 3</li>
    <li id="photo-4">Photo 4</li>
</ul>

​

Answer 2

只需将类添加到元素(ById)中，就像这样简单：

$('#photo-menu li').on('mouseenter', function(){
        var class = $(this).attr('class');
        var pId = $('#'+class).addClass('active');}
});


$('#photo-menu li').on('mouseleave', function(){
        var class = $(this).attr('class');
        var pId = $('#'+class).removeClass('active');}
});

Answer 3

我不明白您想对var pId = ('#photo-desc li').id;做什么，但是我也会重新注释使用jQuery.hover。在这里，您可以使用.addClass("active")在mouseover上设置活动类，使用each(function() {$( this ).removeClass("active");});，您可以在mouseout中从所有div中删除它。

请参阅http://jsfiddle.net/gfobe/owvwrufo/1/作为示例解决方案。