动态更改真棒图标的颜色

Question

我想更改Awesome Icon的颜色，并创建了这段代码，但没有给我颜色，而是得到了“未定义”

<script type="text/javascript">
function changeAIColor(idName) {
    alert ($('idAwesomeIcon').css("color"));
}
</script>

<a href="#" th:onclick="'changeIconColor();'">
    <span th:if="${#lists.contains(userMenus, menu)}">
        <i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg"   style="color:#009900; text-align: center;" aria-hidden="true"></i>
    </span>
    <span th:if="${!#lists.contains(userMenus, menu)}">
        <i d="idAwesomeIcon" class="fa fa-toggle-off fa-lg"  style="color:#e6e6e6;" aria-hidden="true"></i>
    </span>
</a>

Answer 1

您已经错过了JQuery中的id选择器# 。 还要在选择器中使用idName函数的changeAIColor 。 因此，查询变成($('#'+idName).css("color")请注意，您使用了相同的id作为idAwesomeIcon多次。 id值应该在独特的HTML页面中使用。

 function changeAIColor(idName) { alert ($('#'+idName).css("color")); } changeAIColor('idAwesomeIcon'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" th:onclick="'changeIconColor();'"> <span th:if="${#lists.contains(userMenus, menu)}"> <i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i> </span> <span th:if="${!#lists.contains(userMenus, menu)}"> <i id="idAwesomeIcon" class="fa fa-toggle-off fa-lg" style="color:#e6e6e6;" aria-hidden="true"></i> </span> </a> 

Answer 2

您需要$('#idAwesomeIcon').css("color")

另外， <id="idAwesomeIcon"是不正确的。 该ID应该不同，并且实际上应该为id="" 。

Answer 3

<script type="text/javascript">
    $('.AwesomeIcon').each(function(){
      alert ($(this).css("color"));
    });
</script>

<a href="#" th:onclick="'changeIconColor();'">
    <span th:if="${#lists.contains(userMenus, menu)}">
        <i class="fa fa-toggle-on fa-lg AwesomeIcon"   style="color:#009900; text-align: center;" aria-hidden="true"></i>
    </span>
    <span th:if="${!#lists.contains(userMenus, menu)}">
        <i  class="fa fa-toggle-off fa-lg AwesomeIcon"  style="color:#e6e6e6;" aria-hidden="true"></i>
    </span>
</a>

将您的ID更改为class并相应地更改您的JS。