jQuery如果一個元素有類做

我需要一個jQuery腳本，將添加我的img類hidden當我的一個html元素（例如"#3"）有類active。jQuery如果一個元素有類做

我喜歡它：

HTML腳本：

<ul class="navUl" id="menu"> 
    <li class="navi head" id="1">x</li> 
    <li class="navi head" id="2">y</li> 
    <li class="navi head" id="3">q</li> 
    <li class="navi head" id="4">w</li> 
    <li class="navi head" id="5">e</li> 
</ul> 

<img src="img/cover.png" alt="cover" class="cover" id="cover">

jQuery腳本：

$(document).ready(function() { 
$('#3').hasClass('active', function() { 
    $('#cover').addClass('hidden'); 
}); 
});

附：我已經有jQuery腳本，它的工作：

$(document).ready(function() { 
$('#menu li').on('click', function(){ 
    $('#menu li.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 
});

來源

2017-07-22 Ivan Plugatariov

你是說你做了，而且它的工作，或者你有問題嗎？ – adeneo

@adeneo我認爲它的工作原理是唯一活躍課程的意義。不適用於img標籤中的隱藏類 –

保持簡單，您只需驗證目標元素具有類li事件處理程序，然後執行所需操作

$('#menu li').on('click', function() { 
    $('#menu li.active').removeClass('active'); 
    $(this).addClass('active'); 

    $('#cover').toggleClass('hidden', $('#3').hasClass('active')); 
});

否則，使用MutationObserver並傾聽屬性變化

$('#menu li').on('click', function() { 
 
    $('#menu li.active').removeClass('active'); 
 
    $(this).addClass('active'); 
 
}); 
 

 
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 
 

 
var element = $('#3').get(0); 
 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    if (mutation.type == "attributes") { 
 
     $('#cover').toggleClass('hidden', $('#3').hasClass('active')); 
 
    } 
 
    }); 
 
}); 
 

 
observer.observe(element, { 
 
    attributes: true //configure it to listen to attribute changes 
 
});

.active { 
 
    color: red 
 
} 
 

 
.hidden { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="navUl" id="menu"> 
 
    <li class="navi head" id="1">x</li> 
 
    <li class="navi head" id="2">y</li> 
 
    <li class="navi head" id="3">q</li> 
 
    <li class="navi head" id="4">w</li> 
 
    <li class="navi head" id="5">e</li> 
 
</ul> 
 

 
<img src="img/cover.png" alt="cover" class="cover" id="cover">

來源

2017-07-22 11:06:07 Satpal

它也在工作，thx你！ ;） –

這樣做。希望這將幫助你

$(document).ready(function() { 
    if($('#3').hasClass('active')) { 
    $('#cover').hide() 
    } 
})

codepen

來源

2017-07-22 11:05:52 Abinthaha

你可以試試這個例子。

希望這會幫助你。

$(document).ready(function() { 
 
$('#menu li').on('click', function(){ 
 
    $('#menu li.active').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    
 
    if($(this).attr("id") == "3") { 
 
    $("#cover").addClass('hidden'); 
 
    } else { 
 
     $("#cover").removeClass('hidden'); 
 
    } 
 
    
 
}); 
 
});

.hidden { 
 
display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="navUl" id="menu"> 
 
    <li class="navi head" id="1">x</li> 
 
    <li class="navi head" id="2">y</li> 
 
    <li class="navi head" id="3">q</li> 
 
    <li class="navi head" id="4">w</li> 
 
    <li class="navi head" id="5">e</li> 
 
</ul> 
 

 
<img src="img/cover.png" alt="cover" class="cover" id="cover">

來源

2017-07-22 11:08:29

完美，它幫助我！非常感謝！ :) –

jQuery如果一個元素有類做

回答

相關問題