[英]How to target the name attribute with jQuery
所以...
我有這個我正在使用的圖標,來自離子圖標。 我想添加一個 jquery,當用戶單擊該圖標時,它會更改為另一個圖標。 但問題是,它使用屬性名稱來定位圖標。
<a class="mobile-nav-icon js--nav-icon"><ion-icon name="menu-outline"></ion-icon></a>
我想將名稱更改為其他類型的圖標
<a class="mobile-nav-icon js--nav-icon"><ion-icon name="close-outline"></ion-icon></a>
如何定位名稱屬性? 我按照 hasClass、addClass、removeClass 邏輯嘗試了以下操作,但沒有用。
$('.js--nav-icon').click(function(){
var nav = $('.js--main-nav');
var icon = $('.js--nav-icon ion-icon');
nav.slideToggle(200);
if (icon.hasName('menu-outline')){
icon.addName('close-outline');
icon.removeName('menu-outline');
} else {
icon.addName('menu-outline');
icon.removeName('close-outline');
}});
我在 Web Dev 很新。
你可以做:
if (icon.attr('name') === 'menu-outline'){
icon.attr('name', 'close-outline');
您可以使用.attr(attrName, value)
或.attr(attrName, function)
:
$('.js--nav-icon').click(function(){ var nav = $('.js--main-nav'); var icon = $('.js--nav-icon ion-icon'); nav.slideToggle(200); icon.attr('name', icon.attr('name') === 'menu-outline'? 'close-outline': 'menu-outline'); //Remove this..... just for testing console.log( icon[0] ); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="mobile-nav-icon js--nav-icon"><ion-icon name="menu-outline">[ICON]</ion-icon></a>
參考
您可以使用
if($('.js--nav-icon ion-icon').attr('name') === 'menu-outline') {
$('.js--nav-icon ion-icon').attr('name', 'close-outline');
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.