JQuery консолидировать чрезмерное условие if / else

Question

Проверка, есть ли более эффективный способ справиться с этим - jQuery или JS.Идентификаторы кнопок соответствуют трем типам документов, которые вставляют свое содержимое в текстовые области в модальном режиме.Идентификаторы с одним именем работают нормально, это имена с несколькими словами, которые должны отображаться правильно.Стиль не имеет значения - это модальное название, которое является ключевым.Вставки - это просто внешние документы с тем же именем, что и идентификатор кнопки (т. Е. Внешние документы - primarybutton.html, primarybutton.js, primarybutton.css)

       
       $(".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;
            if(id == "primarybutton") {
                $("#modalTitle").html("Primary Button Code");
            } else if(id == "secondarybutton"){
                $("#modalTitle").html("Secondary Button Code");
            } else if(id == "tertiarybutton"){
                $("#modalTitle").html("Tertiary Button Code");
            } else if(id == "segmentedcontrols"){
                $("#modalTitle").html("Segmented Controls Code");
            } else if(id == "time-picker"){
                $("#modalTitle").html("Time Picker Code");
            } else if(id == "textfield"){
                $("#modalTitle").html("Text Field Code");
            } else if(id == "radiobuttons"){
                $("#modalTitle").html("Radio Button Code");
            } else if(id == "textlink"){
                $("#modalTitle").html("Text Link Code");
            } else if(id == "tabbtn"){
                $("#modalTitle").html("Tabs Code");
            }
             else {
            $("#modalTitle").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);
                   }
               });
           });

<button data-target="#codeModal" data-toggle="modal" class="codeBtn" id="primarybutton">Get Code</button>


<div class="modal fade text-center" id="codeModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modalheader">
                            <h1 id="modalTitle">Navigation Code</h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="modal-content-code">
                                <label>HTML:</label>
                                <textarea class="js-copytextarea htmlCode" readonly="readonly" rows="5">Hello. This is textarea test bed #1</textarea>
                                <button class="js-textareacopybtn btn-primary">Copy HTML</button>
                            </div>
                            <div class="modal-content-code">
                                <label>CSS:</label>
                                <textarea class="js-copytextarea cssCode" readonly="readonly" rows="5">Hi! Welcome to textarea test bed #2 </textarea>
                                <button class="js-textareacopybtn btn-primary">Copy CSS</button>
                            </div>
                            <div class="modal-content-code">
                                <label>JS:</label>
                                <textarea class="js-copytextarea jsCode" readonly="readonly" rows="5">Hi! Welcome to textarea test bed #2 </textarea>
                                <button class="js-textareacopybtn btn-primary">Copy JS</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

Другим вариантом будет иметь каждый идентификатор в качестве имени свойства и значение в качестве содержимого, которое вы хотите использовать:

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

Answer 2

Есть несколько хороших решений этой проблемы.

1. Используйте карту для сопоставления между идентификатором кнопки и модальным текстом
2. Используйте атрибут data-* на кнопках, который содержит модальный текст.

Решение 1:

var btnModalMap = {
  "primarybutton": "Primary Button",
  "secondarybutton": "Secondary Button",
  "tertiarybutton": "Tertiary Button",
  "segmentedcontrols": "Segmented Controls",
  "time-picker": "Time Picker",
  //...
  //...
}
$(".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 = btnModalMap[id] || btnId; // default to btnId if id not found in map
  $("#modalTitle").html(modalText + " Code")
  // do ajax here  
});

Решение 2:

HTML

<button class="codeBtn" id="primarybutton" data-modaltext="Primary Button">Primary</button>
<button class="codeBtn" id="secondarybutton" data-modaltext="Secondary Button">Secondary</button>
<button class="codeBtn" id="tertiarybutton" data-modaltext="Tertiary Button">Tertiary</button>
<button class="codeBtn" id="segmentedcontrols" data-modaltext="Segmented Controls">Segmented</button>
<button class="codeBtn" id="time-picker" data-modaltext="Time Picker">Time</button>

JS

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