javascript - 这段 JavaScript 代码可以清理吗？

Question

代码现在工作得很好，但有点草率和长。我对 js 的精通程度并不如我所愿。

Javascript

    $("#IDArea1").click(function () {
        $('#indicator1').toggleClass("icon-caret-up icon-caret-down");
        $('#indicator2').removeClass("icon-caret-up");
        $('#indicator2').addClass("icon-caret-down");
        $('#indicator3').removeClass("icon-caret-up");
        $('#indicator3').addClass("icon-caret-down");
    });
    $("#IDArea2").click(function () {
        $('#indicator2').toggleClass("icon-caret-up icon-caret-down");
        $('#indicator1').removeClass("icon-caret-up");
        $('#indicator1').addClass("icon-caret-down");
        $('#indicator3').removeClass("icon-caret-up");
        $('#indicator3').addClass("icon-caret-down");
    });
    $("#IDArea3").click(function () {
        $('#indicator3').toggleClass("icon-caret-up icon-caret-down");
        $('#indicator2').removeClass("icon-caret-up");
        $('#indicator2').addClass("icon-caret-down");
        $('#indicator1').removeClass("icon-caret-up");
        $('#indicator1').addClass("icon-caret-down");
    });

DOM结构

<div id="IDArea1">
    <i class="icon-caret-up"></i>
</div>
...
<div id="IDArea2">
    <i class="icon-caret-down"></i>
</div>
...
<div id="IDArea3">
    <i class="icon-caret-down"></i>
</div>

基本上，第一个区域(IDArea1)默认是打开的。然后，根据您单击的标题，将单击的标题切换到相反的图标，并强制其他图标为“图标插入符号向下”。所以每个函数的结构是相同的，我感觉有一种更干净的方法来执行这段代码，我只是找不到解决方案。

感谢您的帮助。

Answer 1

将f()重命名为对您的域更有意义的其他名称:

var f = function(indicatorClicked, remainingIndicators) {
    $(indicatorClicked).toggleClass("icon-caret-up icon-caret-down");
    $.each(remainingIndicators, function(index, indicator) {
        $(indicator).removeClass("icon-caret-up").addClass("icon-caret-down");
    });
}

$("#IDArea1").click(function () { f('#indicator1', ['#indicator2', '#indicator3']) });
$("#IDArea2").click(function () { f('#indicator2', ['#indicator1', '#indicator3']) });
$("#IDArea3").click(function () { f('#indicator3', ['#indicator1', '#indicator2']) });