blocks|key|4351849|text|.toggleClass()是一个jQuery函数，您可以将其用作JavaScript。试试这个：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4351850|$("#favIcon").toggleClass('fa-star-o+fa-star');|code-block|syntax|javascript|4351851|entityMap^0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p><code>.toggleClass()</code> is a jQuery function and you're using it as JavaScript. Try this:</p>

<pre><code>$("#favIcon").toggleClass('fa-star-o fa-star');
</code></pre>


blocks|key|4351868|text|Difster的回答是正确的。下面是如何使用原生JavaScript完成相同的任务：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4351869|document.getElementById("favIcon").classList.toggle('fa-star-o');
document.getElementById("favIcon").classList.toggle('fa-star');|code-block|syntax|javascript|4351870|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Difster's response is correct. Here is how you can accomplish the same thing using native JavaScript:</p>

<pre><code>document.getElementById("favIcon").classList.toggle('fa-star-o');
document.getElementById("favIcon").classList.toggle('fa-star');
</code></pre>


blocks|key|4352284|text|您只能使用Javascript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4352285|+function+fav()+{
++++var+icon+=+document.getElementById("favIcon");
++++++if+(icon.classList.contains("fa-star-o"))+{
++++++++icon.classList.remove("fa-star-o");
++++++++icon.classList.add("fa-star");
++++}+else+{
+++++++icon.classList.remove("fa-star");
+++++++icon.classList.add("fa-star-o");
++++}
+}|code-block|syntax|javascript|4352286|example|offset|length|4352287|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/YoliE/pen/dzbNzb^0|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You can use only Javascript:</p>

<pre><code> function fav() {
    var icon = document.getElementById("favIcon");
      if (icon.classList.contains("fa-star-o")) {
        icon.classList.remove("fa-star-o");
        icon.classList.add("fa-star");
    } else {
       icon.classList.remove("fa-star");
       icon.classList.add("fa-star-o");
    }
 }
</code></pre>

<p><a href="https://codepen.io/YoliE/pen/dzbNzb" rel="nofollow noreferrer">example</a></p>


blocks|key|4351923|text|我会将我的评论分成多个评论：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4351924|1/正如在其他评论中提到的：$("#favIcon").toggleClass('fa-star-o+fa-star');这是JS和JQuery调用的混合。如果你想使用纯JS，你可以使用：|offset|length|style|CODE|4351925|document.getElementById("favIcon").classList.toggle('fa-star-o');|code-block|syntax|javascript|4351926|如果你想使用JQuery，你可以使用()，就像Difster的评论中提到的：|4351927|$("#favIcon").toggleClass('fa-star-o');|4351928|2/正如评论中已经提到的，最好附加一个事件侦听器。|4351929|你的提琴js应该是这样的：|4351930|document.getElementById("favBtn").addEventListener("click",+fav);
function+fav()+{
++++document.getElementById("favIcon").classList.toggle('fa-star-o');
++++document.getElementById("favIcon").classList.toggle('fa-star');
}|4351931|并删除超文本标记语言中的"onClick“，因为您将附加一个js事件侦听器。|4351932|链接到检查：JQuery+toggleClass+-+js+classList|4351933|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/toggleclass/|1|https://developer.mozilla.org/en/docs/Web/API/Element/classList^0|0|E|1B|0|0|0|0|0|0|0|0|6|I|0|R|C|1|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1G|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1I|8|@]|9|@]|A|$]]|$1|U|3|V|5|J|7|1J|8|@]|9|@]|A|$K|L]]|$1|W|3|X|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1L|8|@]|9|@$D|1M|E|1N|1|1O]|$D|1P|E|1Q|1|1R]]|A|$]]|$1|10|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]|18|$5|13|14|15|A|$16|19]]]]

<p>I would split my comment into multiple remarks:</p>

<p>1/ As mentioned in the other comments: <code>$("#favIcon").toggleClass('fa-star-o fa-star');</code> This is a mix of JS and JQuery calls. 
If you want to use pure JS you would use: </p>

<pre><code>document.getElementById("favIcon").classList.toggle('fa-star-o');
</code></pre>

<p>If you want to use JQuery you can use () As mentioned in Difster's comment: </p>

<pre><code>$("#favIcon").toggleClass('fa-star-o');
</code></pre>

<p>2/ As mentioned already in the comments, it's better to attach an event listener. </p>

<p>Your Fiddle js would look like this: </p>

<pre><code>document.getElementById("favBtn").addEventListener("click", fav);
function fav() {
    document.getElementById("favIcon").classList.toggle('fa-star-o');
    document.getElementById("favIcon").classList.toggle('fa-star');
}
</code></pre>

<p>And remove the "onClick" on the HTML since you would be attaching a js event listener.</p>

<p>Links to check: 
<a href="http://api.jquery.com/toggleclass/" rel="nofollow noreferrer" title="JQuery toggleClass">JQuery toggleClass</a> - <a href="https://developer.mozilla.org/en/docs/Web/API/Element/classList" rel="nofollow noreferrer" title="js classList">js classList</a></p>


blocks|key|4351949|text|希望能有所帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4351950|​|4351951|$('.fa-star').click(function()+{
++$(this).toggleClass('fas+far');
})|code-block|syntax|javascript|4351952|+<link+rel="stylesheet"+href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"+integrity="sha384-5sAR7xN1Nv6T6%2BdT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"+crossorigin="anonymous">


<script+src="https://unpkg.com/jquery/dist/jquery.min.js"></script>

+
+
+
+
+
+<i+class="far+fa-star"></i>|4351953|4351954|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Hope It Helps</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.fa-star').click(function() {
  $(this).toggleClass('fas far');
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"&gt;


&lt;script src="https://unpkg.com/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;

 
 
 
 
 
 &lt;i class="far fa-star"&gt;&lt;/i&gt;</code></pre>
</div>
</div>
</p>


<p>I have the code as here in this <a href="https://jsfiddle.net/dragenox/0n1n9o9n/1/" rel="noreferrer">jsfiddle</a>, I want the font awesome icon to change on button click using javascript, but it does'nt seem to work. I'm new to javascript so please forgive me if this was a dumb question.</p>

<p>HTML</p>

<pre><code>&lt;button id="favBtn" onclick="fav();"&gt;
    &lt;i id="favIcon" class="fa fa-star-o"&gt;&lt;/i&gt;&amp;nbsp;Favourite
&lt;/button&gt;
</code></pre>

<p>Javascript</p>

<pre><code>function fav() {
    document.getElementById("favIcon").toggleClass('fa-star-o fa-star');
}
</code></pre>


Toggle font awesome class on button click

我有这里的代码，在这里的，我想字体可怕的图标改变按钮点击使用javascript，但它似乎不工作。我是javascript的新手，所以如果这是一个愚蠢的问题，请原谅。HTML<button id="favBtn" onclick="fav();">    <i id="favIcon" class="fa fa-sta...

问在点击按钮时切换字体类
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在点击按钮时切换字体类EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在点击按钮时切换字体类
EN