Question

我一直试图设置以下脚本但没有成功。

我有＃num_11元素，它在悬停时淡化其他几个元素，并在mouseout上淡出它们。这是完美的（我已经非常自豪）

我想要的是，如果你点击＃num_11，其他元素保持可见。再次单击，它们应该再次消失，整个脚本将返回到原始的“模式”

$("#num_11").hover(
    function(){
        $("#identification li").each(function() {
            $("h1", this).fadeIn();
            $("span", this).addClass("opague");
        });
    },
    function(){
        $("#identification li").each(function() {
            $("h1", this).hide();
            $("span", this).removeClass("opague");
        });
    }
);

$("#num_11").click(function(){
    $(this).toggleClass('clicked');
});

我在上面的代码中尝试过的是放置$（“＃num_11”）。not（“。clicked”）。hover（和$（“＃num_11：not（”。clicked“）”）。hover（以及最终陷入混乱的if-else查询...

我非常感谢你对我挑战的帮助。

一切顺利， ķ

Answer 1

尝试以下代码;

$("#num_11").hover(
function(){
  if(!$(this).hasclass('clicked')){
    $("#identification li").each(function() {
        $("h1", this).fadeIn();
        $("span", this).addClass("opague");
    });
  }
},
function(){
  if(!$(this).hasclass('clicked')){
    $("#identification li").each(function() {
        $("h1", this).hide();
        $("span", this).removeClass("opague");
    });
  }
});
$("#num_11").click(function(){
$(this).toggleClass('clicked');
});

Answer 2

尝试过滤：

$("#num_11").filter(function() {
    return !$(this).hasClass('clicked');
}).hover(
    ...
);

jquery：仅当元素不是.clicked时才悬停函数

2 个答案: