Question

我想改变一个很棒的图标的颜色，我创建了这段代码，但是没有给我颜色，我得到了一个未定义的＆＃39;

<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。 function changeAIColor(idName) { alert ($('#'+idName).css("color")); } changeAIColor('idAwesomeIcon');值应在HTML页面中唯一使用。

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

DBHelper.realm.objects(DBHelper.Test).filtered('Id == $0', 1)

Answer 2

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

<i d="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更改为类并相应地更改您的JS。

动态更改Awesome图标的颜色

3 个答案: