如何编写这个jQuery函数，以便'；是它'；它干净高效吗？

我编写了一些jQuery（在堆栈溢出的帮助下！），它在单击时滑动打开一个面板，并将可单击位的切换从“全部显示”更改为“全部隐藏”

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

我尝试过使用变量并指定要重复的HTML，但它不起作用，我也无法找出我的逻辑中的问题在哪里

这是工作版本，并且：

$（函数（）{
//使用jQuery和createtoggle按钮隐藏面板，这样在没有javascript的情况下主题就会显示出来
$（“#panelSub”）.hide（）；
$（'#toggleSubjects'）.html（'Show All Subjects'）；
//切换额外主题面板
$（“#切换主题”）。单击（函数（）{
$（“#panelSub”）.slideToggle（）；
//更改显示/隐藏的切换文本
if（$.trim（$（'.subjectOpen'）.text（））==='显示所有主题'）{
$（this.html（'Hide All subject'）；
}否则{
$（this.html（'Show All subject'）；
}
});
返回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;
 });

var pOpen='Show All subject'；
var pClose=‘显示所有受试者’；
var p=$（'#toggleSubjects'）.html（）；
$（函数（）{
//使用jQuery和createtoggle按钮隐藏面板，以便在没有javascript的情况下显示主题
$（“#panelSub”）.hide（）；
var p=pOpen.html（）.appendTo（'panelSub'）；
//切换主题面板
$（“#切换主题”）。单击（函数（）{
$（“#panelSub”）。滑动切换（“慢速”）；
//更改显示/隐藏的切换文本
if（$.trim（$（'.subjectOpen'）.text（））==='显示所有主题'）{
$（this.html（）==pClose.html（）；
}否则{
$（this.html（）==pOpen.html（）；
}
});
返回false；
});

我不懂这句话

var p = pOpen.html().appendTo('panelSub');

但要改变这一路线

$(this).html() === pClose.html();
$(this).html()=== pOpen.html();  

致：

---

请查看此更新的JSFIDLE：

我已将您的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;
});

$（文档）.ready（函数（）{
var theToggle=''；
$（“#panelSub”）.hide（）；
$（“.panel default”）.append（图标）；
$（“#切换主题”）。单击（函数（）{
$（“#panelSub”）。滑动切换（“慢速”）；
$（this）.find（'i'）.toggleClass（'fa-arrow-circle-down-fa-arrow-circle-up'））
});
返回false；
});

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

---

稍后编辑：我已经更新了适合您需要的代码。

Dai这太难了。。在这里，代码收缩工作将不会完成。。您可以在这里发布您的问题此问题属于Stack Exchange网络中的另一个站点：这应该在Codereview站点上，但我会将IF转换为Turnary IF，并将$（'.subjectOpen'）转换为函数外部的变量。否则，每次运行click函数时，它都需要在DOM中搜索该元素。这比物理代码大小更能体现性能。嘿，太好了，谢谢！除了一件事！如果没有JS，“显示所有主题”“隐藏所有主题”栏不应该出现，因此需要使用函数（）创建它。另外，您介意解释一下这条有用的行吗$（this）.find（'i'）.toggleClass（'fa-arrow-circle-down-fa-arrow-circle-up'）。。。我想这意味着，找到fa-arrow类的第一个实例并切换它？这里有一个解释：我对您的代码进行了一些编辑，并使用jquery创建了切换，fiddle在这里，如果您可以更新您的答案，我会将其标记为答案，非常感谢！）

$(this).html(pClose);
$(this).html(pOpen);  

$(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;
});