转换“相同”多个<Button>功能与通用功能<Select>

我有多个按钮，都做了非常相似的事情。如何使用<select>框与一个<button>用较少的JavaScript做同样的事情？转换“相同”多个<Button>功能与通用功能<Select>

这些是我想要变成一个<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"; 
}

来源

2017-03-08 SeekLoad

谢谢你缩短了我的答案。我想我的英语在讨论代码时不太好。谢谢... @jcuenod – SeekLoad

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

我已经创建了一个文件类型数组，并使用jquery将填入<option> s。然后，我只是仰望选择哪一个当您单击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>

来源

2017-03-08 18:59:23 jcuenod

谢谢你。它工作完美。现在我想知道有没有办法做到这一点，而不使用“jquery”？如果没有，那么我会简单地使用jquery，但我宁愿要它独立于jquery，如果可能的话。可悲的是，我不能给你一个像，因为我需要超过15的名誉，现在我只有11。这是因为我刚开始使用这个页面。我之前有过这个账户很长一段时间，但我从来没有使用过它。 – SeekLoad

@SeekLoad你应该能够接受11的代表答案。没有jquery很容易做到这一点 - 我只使用jquery填充''元素，但是你想要的。我使用jquery，因为你用jquery标记了你的问题。 – jcuenod

@SeekLoad也，我已经编辑了你的问题，以向你展示如何在未来提出更好的问题。尽量减少你的代码至关重要，这使得回答这个问题变得更容易。如果可能的话，让它成为其他人可以从中受益的问题。 – jcuenod

转换“相同”多个<Button>功能与通用功能<Select>

回答

相关问题