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）默认是打开的。然后，根据您单击的标题，将单击的标题切换到相反的图标，并强制其他标题为＆＃34; icon-caret-down＆＃34;。所以每个函数的结构是相同的，我觉得有一个更简洁的方法来执行这个代码，我只是无法找到解决方案。

感谢您的帮助。

Answer 1

是的，您可以清理代码。

您可以创建如下函数：

function iconCaret(el1, el2, el3, el4, el5) {
    $(el1).toggleClass("icon-caret-up icon-caret-down");
    $(el2).removeClass("icon-caret-up");
    $(el3).addClass("icon-caret-down");
    $(el4).removeClass("icon-caret-up");
    $(el4).addClass("icon-caret-down");
}

Answer 2

将 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']) });

Answer 3

这是你可以尝试的东西。 Haven没有对它进行测试，因此它可能包含错别字。 [id=^'IDArea']选择以＆＃34; IDArea＆＃34;开头的id元素。

$("[id=^'IDArea']").click(doStuff);

function doStuff(){
    var num=$("[id=^'IDArea']").eq(this);
    $('#indicator'+num).toggleClass("icon-caret-up icon-caret-down");
    $("[id=^'indicator']").not('#indicator'+num).removeClass("icon-caret-up").addClass("icon-caret-down");
}

可以清理这个JavaScript代码吗？

3 个答案: