jquery - 我该如何编写这个 jQuery 函数，使其干净高效？

Question

我编写了一些 jQuery(在 Stack Overflow 的帮助下!)，它可以在单击时滑动打开面板，并将可单击位的切换从“显示全部”更改为“隐藏全部”。

它有效，但我试图找出最有效的方法，因为它对我来说似乎有点长，并且一些 HTML 是重复的。

我尝试过使用变量并分配要重复的 HTML，但它不起作用，我无法弄清楚我的逻辑问题出在哪里!

这是工作版本和 a working fiddle here :

  $(function () {
    //Hide panel with jQuery and create toggle button so subjects will just show up if there's no javascript
    $("#panelSub").hide();
    $('#toggleSubjects').html('<h4 class="subjectOpen"><i class="fa fa-arrow-circle-down"></i>Show All Subjects<i class="fa fa-arrow-circle-down"></i></h4>');

    //Toggle extra subject panel
    $("#toggleSubjects").click(function () {
        $("#panelSub").slideToggle();
        //Change toggle text for show / hide
        if ($.trim($('.subjectOpen').text()) === 'Show All Subjects') {
            $(this).html('<h4 class="subjectOpen"><i class="fa fa-arrow-circle-up"></i>Hide All Subjects<i class="fa fa-arrow-circle-up"></i></h4>');
        } else {
            $(this).html('<h4 class="subjectOpen"><i class="fa fa-arrow-circle-down"></i>Show All Subjects<i class="fa fa-arrow-circle-down"></i></h4>');
        }
    });
    return false;
});

这是我一直在尝试的“更高效”的非工作版本，对于它的糟糕程度提前表示歉意:/

    var pOpen = '<h5 class="subjectOpen"><i class="fa fa-arrow-circle-down"></i>Show All Subjects <i class="fa fa-arrow-circle-down"></i></h5>';
var pClose = '<h5 class="subjectOpen"><i class="fa fa-arrow-circle-down"></i>Show All Subjects <i class="fa fa-arrow-circle-down"></i></h5>';
var p = $('#toggleSubjects').html();

$(function() {
//Hide panel with jQuery and create toggle button so subjects will just show if there's no javascript
$("#panelSub").hide();

var p = pOpen.html().appendTo('panelSub');
//Toggle subject panel
$("#toggleSubjects").click(function(){
    $("#panelSub").slideToggle("slow");
    //Change toggle text for show / hide
        if ($.trim($('.subjectOpen').text()) === 'Show All Subjects') {
        $(this).html() === pClose.html();
        } else {
        $(this).html()=== pOpen.html();    
            }
        });
        return false;
 });

Answer 1

请查看更新后的 jsFiddle:https://jsfiddle.net/emerfan/2oqxL8hx/2/

我已将您的 JS 代码更改为:

$(document).ready(function () {
    var theToggle = '<div class="panel-heading" id="toggleSubjects"><h5 class="subjectOpen"> <i class="fa fa-arrow-circle-down"></i> <i class="fa fa-arrow-circle-down"></i></h5></div>';
    $("#panelSub").hide();
    $(".panel-default").append(theToggle);
    $("#toggleSubjects").click(function () {
        $("#panelSub").slideToggle("slow");                
        $(this).find('i').toggleClass('fa-arrow-circle-down fa-arrow-circle-up')
    });
    return false;
});

并更新了您的 HTML 和 CSS 以保存您的所有结构和内容。 将事物分开(HTML、CSS 和 JS)是一个很好的做法

稍后编辑:我已更新了适合您需求的代码。