使用 <Select> 将 "Same" 多个 <Button> 函数转换为泛型函数

Question

我有多个按钮，它们的功能都非常相似。我如何使用一个 <select> 盒子和一个 <button> 来用更少的 javascript 做同样的事情？

这些是我想变成一个只有一个按钮的 <select> 框的按钮：

<button onclick="SaveAsHTML()">Save As HTML</button>
<button onclick="SaveAsJS()">Save As JS</button>
<button onclick="SaveAsCSS()">Save As CSS</button>
<button onclick="SaveAsTXT()">Save As TXT</button>

这是我现在的 javascript：

function SaveAsHTML()
{
    var filename = document.getElementById("txtFilename").value;
    var filename = filename + ".html";
}

function SaveAsCSS()
{
    var filename = document.getElementById("txtFilename").value;
    var filename = filename + ".css";
}

function SaveAsJS()
{
    var filename = document.getElementById("txtFilename").value;
    var filename = filename + ".JS";
}

function SaveAsTXT()
{
    var filename = document.getElementById("txtFilename").value;
    var filename = filename + ".txt";
}

Answer 1

这是一个片段，我认为不需要太多解释。

我创建了一个文件类型数组，并使用 jquery 将 <select> 填充为 <option>。然后，当您单击 save 按钮时，我只查找选择了哪一个...

var types = [
  {"extension": "html", "name": "HTML"},
  {"extension": "txt", "name": "Plain Text"},
  {"extension": "js", "name": "Javascript"},
  {"extension": "css", "name": "CSS"},
]
types.forEach(function(type) {
  $opt = $("<option>").attr("value", type.extension).text(type.name)
  $("#saveas").append($opt)
})

function SaveAsType()
{
    console.log($("#saveas").val())
    /**
     * Put your code here and replace:
     document.getElementById("inputFileNameToSaveAs").value + ".html";
     * with
     document.getElementById("inputFileNameToSaveAs").value + "." + $("#saveas").val();
     */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Save as <select id="saveas">
</select><button onclick="SaveAsType()">save</button>

使用 <Select> 将 "Same" 多个 <Button> 函数转换为泛型函数

Convert "Same" Multiple <Button> Functions to Generic Function with <Select>

javascript

jquery

html

select

option