Javascript jQuery合并过多的if/else条件

检查是否有更有效的方法来处理此问题-jQuery或JS。按钮ID与三种类型的文档相匹配，这些文档将其内容插入模式中的文本区域。ID只有一个名字工作正常，需要正确显示多个单词的名字。风格是不相关的-关键是模式标题。插入内容只是与按钮ID同名的外部文档（即，外部文档是primarybutton.html、primarybutton.js、primarybutton.css）

$（“.codeBtn”）。单击（函数（）{
var btnId=$（this.attr（“id”）；
var htmlUrl=“./modals/”+btnId+“.html”；
var jsUrl=“./modals/”+btnId+“.js”；
var cssUrl=“./modals/”+btnId+“.css”；
var id=this.id；
如果（id==“主按钮”）{
$（“#modaltle”）.html（“主按钮代码”）；
}else if（id==“secondarybutton”）{
$（“#modaltle”）.html（“辅助按钮代码”）；
}else if（id==“tertiarybutton”）{
$（“#modaltle”）.html（“第三级按钮代码”）；
}else if（id==“分段控制”）{
$（“#modaltle”）.html（“分段控件代码”）；
}else if（id==“时间选择器”）{
$（“#modaltle”）.html（“时间选择器代码”）；
}else if（id==“textfield”）{
$（“#modaltle”）.html（“文本字段代码”）；
}else if（id==“单选按钮”）{
$（“#modaltle”）.html（“单选按钮代码”）；
}else if（id==“textlink”）{
$（“#modaltle”）.html（“文本链接代码”）；
}else if（id==“tabbtn”）{
$（“#modaltle”）.html（“制表符代码”）；
}
否则{
$（“#modaltile”）.html（btnId+“代码”）；
}
$.ajax({
网址：htmlUrl，
数据类型：“文本”，
成功：功能（数据）{
$（“.htmlCode”）.text（数据）；
}
});
$.ajax({
url:jsUrl，
数据类型：“文本”，
成功：功能（数据）{
$（“.jsCode”）.text（数据）；
}
});
$.ajax({
网址：cssUrl，
数据类型：“文本”，
成功：功能（数据）{
$（“.cssCode”）.text（数据）；
}
});
});
获取代码
导航码
HTML:
你好这是textarea测试台#1
复制HTML
CSS:
你好欢迎来到textarea测试台#2
复制CSS
JS:
你好欢迎来到textarea测试台#2
复制JS
对于这个问题，有几种很好的解决方案

使用映射在按钮ID和模式文本之间映射
在包含模式文本的按钮上使用
data-*
属性
解决方案1：
解决方案2：
HTML

对于这个问题有两个很好的解决方案

使用映射在按钮ID和模式文本之间映射
在包含模式文本的按钮上使用
data-*
属性
解决方案1：
解决方案2：
HTML

另一种选择是将每个id作为属性名，将值作为要使用的内容：

   $(".codeBtn").click(function() {

        var btnId = $(this).attr("id"),
            htmlUrl = "./modals/" + btnId + ".html",
            jsUrl = "./modals/" + btnId + ".js",
            cssUrl = "./modals/" + btnId + ".css",
            id = this.id,
            $title = $("#modalTitle"),
            reference = {
                primarybutton: "Primary Button Code",
                secondarybutton: "Secondary Button Code",
                tertiarybutton: "Tertiary Button Code",
                segmentedcontrols: "Segmented Controls Code",
                "time-picker": "Time Picker Code",
                textfield: "Text Field Code",
                radiobuttons: "Radio Button Code",
                textlink: "Text Link Code",
                tabbtn: "Tabs Code"
            };

        if (reference[id])
            $title.html(reference[id]);
        else 
            $title.html(btnId + " Code");

        $.ajax({
            url : htmlUrl,
            dataType: "text",
            success : function (data) {
                $(".htmlCode").text(data);
            }
        });
        $.ajax({
            url : jsUrl,
            dataType: "text",
            success : function (data) {
                $(".jsCode").text(data);
            }
        });
        $.ajax({
            url : cssUrl,
            dataType: "text",
            success : function (data) {
                $(".cssCode").text(data);
            }
        });
    });

另一种选择是将每个id作为属性名，将值作为要使用的内容：

   $(".codeBtn").click(function() {

        var btnId = $(this).attr("id"),
            htmlUrl = "./modals/" + btnId + ".html",
            jsUrl = "./modals/" + btnId + ".js",
            cssUrl = "./modals/" + btnId + ".css",
            id = this.id,
            $title = $("#modalTitle"),
            reference = {
                primarybutton: "Primary Button Code",
                secondarybutton: "Secondary Button Code",
                tertiarybutton: "Tertiary Button Code",
                segmentedcontrols: "Segmented Controls Code",
                "time-picker": "Time Picker Code",
                textfield: "Text Field Code",
                radiobuttons: "Radio Button Code",
                textlink: "Text Link Code",
                tabbtn: "Tabs Code"
            };

        if (reference[id])
            $title.html(reference[id]);
        else 
            $title.html(btnId + " Code");

        $.ajax({
            url : htmlUrl,
            dataType: "text",
            success : function (data) {
                $(".htmlCode").text(data);
            }
        });
        $.ajax({
            url : jsUrl,
            dataType: "text",
            success : function (data) {
                $(".jsCode").text(data);
            }
        });
        $.ajax({
            url : cssUrl,
            dataType: "text",
            success : function (data) {
                $(".cssCode").text(data);
            }
        });
    });

除了下面的解决方案之外，有时还可以使用switch/case语句来简化冗长的if/else语句：除了下面的解决方案之外，有时候，switch/case语句可以用来简化冗长的if/else语句：这是已经发布的答案的一个效率稍低的副本。我猜你的意思是这个选项没有那么短。这本应该是清楚的，但是你的第一个选择也可以。我的意思是，它在CPU周期和内存分配方面效率较低。因为您是在单击处理程序内重新声明
引用
对象，所以每次单击按钮时都会重新创建该对象，而不是在程序的生命周期内在单击处理程序外声明一次引用。这也许可以忽略不计，但效率却更低。我同意你的看法。我只是看到这个问题可能需要一种清晰的方式来比较最初呈现的代码，如果它来自JavaScript新手。我也会选择你的第一个选项。这是一份已经发布的答案的效率稍低的副本。我猜你的意思是这个选项没有那么短。这本应该是清楚的，但是你的第一个选择也可以。我的意思是，它在CPU周期和内存分配方面效率较低。因为您是在单击处理程序内重新声明
引用
对象，所以每次单击按钮时都会重新创建该对象，而不是在程序的生命周期内在单击处理程序外声明一次引用。这也许可以忽略不计，但效率却更低。我同意你的看法。我只是看到问题可能需要一种清晰的方式来比较最初呈现的代码，如果它来自新的人
$(".codeBtn").click(function() {
  var btnId = $(this).attr("id");
  var htmlUrl = "./modals/" + btnId + ".html";
  var jsUrl = "./modals/" + btnId + ".js";
  var cssUrl = "./modals/" + btnId + ".css";
  var id = this.id;
  var modalText = $(this).attr("data-modaltext") || btnId; // default to btnId in case there is no modal text defined
  $("#modalTitle").html(modalText + " Code")
  // do ajax here  
});

   $(".codeBtn").click(function() {

        var btnId = $(this).attr("id"),
            htmlUrl = "./modals/" + btnId + ".html",
            jsUrl = "./modals/" + btnId + ".js",
            cssUrl = "./modals/" + btnId + ".css",
            id = this.id,
            $title = $("#modalTitle"),
            reference = {
                primarybutton: "Primary Button Code",
                secondarybutton: "Secondary Button Code",
                tertiarybutton: "Tertiary Button Code",
                segmentedcontrols: "Segmented Controls Code",
                "time-picker": "Time Picker Code",
                textfield: "Text Field Code",
                radiobuttons: "Radio Button Code",
                textlink: "Text Link Code",
                tabbtn: "Tabs Code"
            };

        if (reference[id])
            $title.html(reference[id]);
        else 
            $title.html(btnId + " Code");

        $.ajax({
            url : htmlUrl,
            dataType: "text",
            success : function (data) {
                $(".htmlCode").text(data);
            }
        });
        $.ajax({
            url : jsUrl,
            dataType: "text",
            success : function (data) {
                $(".jsCode").text(data);
            }
        });
        $.ajax({
            url : cssUrl,
            dataType: "text",
            success : function (data) {
                $(".cssCode").text(data);
            }
        });
    });