[英]How to target the name attribute with jQuery
So...所以...
I have this Icon that I am using, from ion icons.我有这个我正在使用的图标,来自离子图标。 I want to add a jquery that when the user clicks the icon it changes to another one.我想添加一个 jquery,当用户单击该图标时,它会更改为另一个图标。 But the issue is, it uses the attribute name to target the icon.但问题是,它使用属性名称来定位图标。
<a class="mobile-nav-icon js--nav-icon"><ion-icon name="menu-outline"></ion-icon></a>
I want to change the name to the other type of icon我想将名称更改为其他类型的图标
<a class="mobile-nav-icon js--nav-icon"><ion-icon name="close-outline"></ion-icon></a>
How can I target the name attribute?如何定位名称属性? I tried the bellow, following the hasClass, addClass, removeClass logic but didnt work.我按照 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');
}});
Im quite new at Web Dev.我在 Web Dev 很新。
You can do:你可以做:
if (icon.attr('name') === 'menu-outline'){
icon.attr('name', 'close-outline');
You can use the .attr(attrName, value)
or .attr(attrName, function)
:您可以使用.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>
Reference参考
You can use您可以使用
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.