Jquery - addClass和removeClass不工作

-2

我試圖從i標記切換類。首先，我嘗試了通過使用jQuery UI的switchClass這樣的：Jquery - addClass和removeClass不工作

$("#sidenavIcon").switchClass('fa-angle-double-right', 'fa-angle-double-left');

這是行不通的。我發現其他人也遇到了switchClass問題，他被告知use removeClass and addClass instead，他爲他工作。

但是，對我來說這是行不通的，現在我很困惑。

$(document).ready(
 
    function() { 
 
    $("#sidenav").on("click", function() { 
 
     $("#sidenavIcon").addClass('fa-angle-double-right').removeClass('fa-angle-double-left'); 
 
    }); 
 
    } 
 
);

#sidenav { 
 
    background-color: #333333; 
 
    color: white; 
 
    height: 100vh; 
 
    width: 10vw; 
 
    position: relative; 
 
} 
 

 
#sidenav:hover { 
 
    cursor: pointer; 
 
} 
 

 
#sidenavIconWrap { 
 
    font-size: 50px; 
 
    color: white; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#sidenavIcon { 
 
    color: white; 
 
    font-size: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="sidenav"> 
 
    <div id="sidenavIconWrap"> 
 
    <i id=sidenavIcon" class="fa fa-angle-double-left" aria-hidden="true"></i> 
 
\t </div> 
 
</div>

UPDATE：

正是因爲缺少"確實。我相信PhpStorm能夠找到並指出它......我瞭解到：即使您擁有昂貴的IDE，也不要信任您的IDE。

來源

2017-04-06 Black

所以，現在它的工作呢？ –

你失蹤在<i id=sidenavIcon"一個"。它改變了我的工作後。如果您想要切換，請繼續，然後將addClass和removeClass同時切換爲toggleClass。

$(document).ready(
 
    function() { 
 
    $("#sidenav").on("click", function() { 
 
     $("#sidenavIcon").toggleClass('fa-angle-double-right').toggleClass('fa-angle-double-left'); 
 
    }); 
 
    } 
 
);

#sidenav { 
 
    background-color: #333333; 
 
    color: white; 
 
    height: 100vh; 
 
    width: 10vw; 
 
    position: relative; 
 
} 
 

 
#sidenav:hover { 
 
    cursor: pointer; 
 
} 
 

 
#sidenavIconWrap { 
 
    font-size: 50px; 
 
    color: white; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#sidenavIcon { 
 
    color: white; 
 
    font-size: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="sidenav"> 
 
    <div id="sidenavIconWrap"> 
 
    <i id="sidenavIcon" class="fa fa-angle-double-left" aria-hidden="true"></i> 
 
    </div> 
 
</div>

來源

2017-04-06 09:49:04 Neil

非常感謝你，PhpStorm並沒有指出'''缺少，因爲你可以在屏幕截圖中看到，所以我沒有注意到它。 – Black

它發生在我們身上。 – Neil

@AlivetoDie沒有得到表示他們想要'toggleClass'，我更新了它。 – Neil

嘗試這種解決方案是工作的順利進行

代之以id=sidenavIcon"id="sidenavIcon"

$(document).ready(function() { 
 
    $("#sidenav").on("click", function() { 
 
     if ($("#sidenavIcon").hasClass("fa-angle-double-right")) { 
 
      $("#sidenavIcon").removeClass('fa-angle-double-right').addClass('fa-angle-double-left'); 
 
     } 
 
     else { 
 
      $("#sidenavIcon").addClass('fa-angle-double-right').removeClass('fa-angle-double-left'); 
 
     } 
 
    }); 
 
});

#sidenav { 
 
    background-color: #333333; 
 
    color: white; 
 
    height: 100vh; 
 
    width: 10vw; 
 
    position: relative; 
 
} 
 
#sidenav:hover { 
 
\t cursor: pointer; 
 
} 
 

 
#sidenavIconWrap { 
 
\t font-size: 50px; 
 
\t color: white; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
} 
 

 
#sidenavIcon { 
 
    color: white; 
 
    font-size: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="sidenav"> 
 
\t <div id="sidenavIconWrap"> 
 
\t \t <i id="sidenavIcon" class="fa fa-angle-double-left" aria-hidden="true"></i> 
 
\t </div> 
 
</div>

來源

2017-04-06 09:53:56

你只是錯過了一個雙引號在HTML，請按照下列：
你writen id=sidenavIcon"，但你應該寫id="sidenavIcon"

<div id="sidenav"> 
    <div id="sidenavIconWrap"> 
     <i id="sidenavIcon" class="fa fa-angle-double-left" aria-hidden="true"></i> 
    </div> 
</div>

來源

2017-04-06 09:55:07

你忘了在

添加的開口「

<i id=sidenavIcon">

你可以這樣檢查：

document.getElementById("sidenavIcon")

返回null

document.getElementById("sidenavIcon\"")

返回你的div元素。

所以目前YOUE Id爲sidenavIcon」

來源

2017-04-06 10:01:12

的jQuery：使用toggleClass（）;而不是switchClass（）或添加或刪除類。 HTML：添加小姐「之前ID = sidenavIcon」

$(document).ready(function() { 
 

 
$("#sidenav").on("click", function() { 
 

 
    $("#sidenavIcon").toggleClass('fa-angle-double-right fa-angle-double-left'); 
 
}); 
 
    });

#sidenav { 
 
    background-color: #333333; 
 
    color: white; 
 
    height: 100vh; 
 
    width: 10vw; 
 
    position: relative; 
 
} 
 
#sidenav:hover { 
 
\t cursor: pointer; 
 
} 
 

 
#sidenavIconWrap { 
 
\t font-size: 50px; 
 
\t color: white; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
} 
 

 
#sidenavIcon { 
 
    color: white; 
 
    font-size: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="sidenav"> 
 
\t <div id="sidenavIconWrap"> 
 
\t \t <i id="sidenavIcon" class="fa fa-angle-double-left" aria-hidden="true"></i> 
 
\t </div> 
 
</div>

來源

2017-04-06 10:05:02

Jquery - addClass和removeClass不工作

回答

相關問題