检查是否有更有效的方法来处理-jQuery或JS。按钮ID与三种类型的文档匹配,这些文档的内容以模态形式插入到textareas中。具有单个名称的ID可以正常工作,具有多个单词的名称需要正确显示。样式无关紧要-关键是模式标题。插入内容只是与按钮ID同名的外部文档(即,外部文档是primarybutton.html,primarybutton.js,primarybutton.css)
src/subapp/subapp.module.ts
$(".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);
}
});
});
答案 0 :(得分:3)
有两个很好的解决方案。
data-*
属性。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
});
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
});
答案 1 :(得分:0)
另一种选择是将每个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);
}
});
});