How to target the name attribute with jQuery

Question

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. 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.

$('.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.

Does this answer your question? [How can I select an element by name with jQuery?](https://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery) — rawnewdlz, Jul 28 '20 at 20:39

score 1 · Accepted Answer · answered Jul 28 '20 at 20:37

1

You can do:

if (icon.attr('name') === 'menu-outline'){
    icon.attr('name', 'close-outline');

answered Jul 28 '20 at 20:37

dave

62,300
5
72
93

Thanks! didnt know about this function. Might have to dive more into jQuery to understand it better! – Javabeginner Jul 28 '20 at 20:59

PeterKA · Answer 2 · 2020-07-28T22:11:23.453

You can use the .attr(attrName, value) or .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

.attr() | jQuery API Documentation

score 0 · Answer 3 · answered Jul 28 '20 at 20:44

0

You can use

if($('.js--nav-icon ion-icon').attr('name') === 'menu-outline') {
 $('.js--nav-icon ion-icon').attr('name', 'close-outline');
}

answered Jul 28 '20 at 20:44

Nayana Chandran

1,416
1
16
30

How to target the name attribute with jQuery

3 Answers3