Question

我想更改单击时的箭头样式。

关闭手风琴时，箭头向下。当用户单击向下箭头时，手风琴将打开，并且箭头将指向上方。

 <button type="button" class="btn btn-warning btn-sm " onclick="changeToggle(this)"><i class="fa fa-arrow-down" ></i></button> 


function changeToggle(btn) {
 $(btn).closest("tr").next().toggle();     
 $(btn).removeClass('fa-arrow-down').addClass('fa-arrow-up');
}

通常在jQuery中，如果我知道父项的ID，则可以使用$("#id i")，但是因为我在代码中使用了this作为参数。

我不确定如何访问按钮内部以更改箭头样式。

Answer 1

您只需要找到按钮的嵌套.fa。您可以为此使用$()的上下文版本，然后只需在类之间来回切换。

function changeToggle (btn) {
  $('.fa', btn).toggleClass('fa-arrow-down fa-arrow-up');
}

.fa-arrow-down { color: red; }
.fa-arrow-up { color: green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-warning btn-sm " onclick="changeToggle(this)"><i class="fa fa-arrow-down">text for easy change</i></button>

用jQuery更改Fontawesome图标

1 个答案: