我最近开始学习Javascript来帮助我工作,我不禁想到我咬得比我咀嚼的多得多。
这个想法:
使用表单,获取单个输入信息,使用预定义值为信息添加前缀和后缀,并将其输出到textarea,以便我可以复制/使用它。
出于某种原因,我发现到目前为止学习javascript特别困难,而且我放在一起的代码确实有用,我想要的却是如此但我不禁想到我抛出的代码令人难以置信马虎。
表格
<form name="invalidateForm" action="">
Image Name:<br /><input id="imageName" type="text" name="imageName" value=""><br />
<input class="btn" type="button" onclick="invalidateUrls()" value="Generate URLs">
<input class="btn" type="reset"><br />
<textarea id="icdnResults"></textarea>
</form>
JavaScript
<script type="text/javascript">
function invalidateUrls()
{
var txt = "";
document.getElementById("icdnResults").value = "";
if (document.getElementById("imageName").value != ""){
txt = "";
//Category Thumbnails
txt += "prefix text";
txt += document.getElementById("imageName").value;
txt += "suffix text\n";
//Product Page Main Image
txt += "prefix text 2";
txt += document.getElementById("imageName").value;
txt += "suffix text 2\n";
//Flyout image on product page
txt += "prefix text 3";
txt += document.getElementById("imageName").value;
txt += "suffix text 3\n";
//Product page thumbnails
txt += "prefix text 4";
txt += document.getElementById("imageName").value;
txt += "suffix text 4\n";
document.getElementById("icdnResults").value += txt;
}
}
</script>
我99%肯定我所做的事情比草率更进一步,而且我也猜测这不是“未来的证据”。
我应该更多地使用和定义变量,还是有完全不同的方式呢?
如果有人能说出我是在正确的轨道上还是我应该完全废弃它,我们将不胜感激。
谢谢:)
亚历克斯
的修改
我向任何阅读此内容的人道歉,似乎我没有正确解释并忘记提及一件至关重要的事情;前缀和后缀都有4个不同的字符串。
因此,用户会在输入字段中输入一个值,并在其前面添加4个不同的值,并且后缀为4个不同的值。
http://www.somedomain.com/folder/?fmy=<<USER_INPUT>>&type=etc
http://www.somedomain.com/folder/?someCmd=<<USER_INPUT>>&layer=etc
http://www.somedomain.com/folder/?itemId=<<USER_INPUT>>&value=etc
http://www.somedomain.com/folder/?pageR=<<USER_INPUT>>&caption=etc
那么“?”有4个不同的值,其中“&amp;”还有4个完全不同的值。
编辑2
好的,按照John的回复......我已经调整了一下。
它看起来怎么样?这是我第一次改变代码的垃圾吗?
var processForm = function(){
var value = $('#imageName').val(),
outputElement = $('#icdnResults'),
html = '',
s_imageTag = function(size){
return size + value;
},
e_imageTag = function(size2){
return size2 + "\n";
},
size = ['s_catThumb', 's_productMain'],
size2 = ['e_catThumb', 'e_productMain'];
html += s_imageTag('s_catThumb ');
html += e_imageTag(' e_catThumb');
html += s_imageTag('s_productMain ');
html += e_imageTag(' e_productMain');
outputElement.val(html);
};
$(function(){
$('#gen').on('click', processForm);
});
答案 0 :(得分:1)
也许这种事情?
HTML
<input id="user_input" type="text" placeholder="User Input" value="test">
<button id="process" type="button">Process</button>
<br>
<textarea id="output" row="4" cols="60" style="height:60px"></textarea>
<div id="images">
</div>
JS
var getLinks = function(value){
var links = [
'http://placehold.it/100x100/ff0000&text=<<USER_INPUT>>',
'http://placehold.it/100x100/0000ff&text=<<USER_INPUT>>',
'http://placehold.it/100x100/00ff00&text=<<USER_INPUT>>',
'http://placehold.it/100x100/ff00ff&text=<<USER_INPUT>>',
];
$.each(links, function(idx, link){
links[idx] = link.replace('<<USER_INPUT>>', value);
});
return links;
},
processForm = function(){
var value = $('#user_input').val(),
links = getLinks(value),
getText = function(){
var h = '';
$.each(links, function(idx, link){
h += link + "\n";
});
return h;
},
addImages = function(){
var h = '';
$.each(links, function(idx, link){
h += '<img src="'+link+'">';
});
$('#images').html(h);
};
$('#output').val(getText());
addImages();
};
$('#process').on('click', processForm);
答案 1 :(得分:1)
如上所述,但没有使用额外的库。 JQuery很棒,如果你要做很多JavaScript,你会发现它更容易使用。但是如果您不想在附加库上添加依赖项,则可以使用vanilla JS完成相同的操作:
HTML
<form name="invalidateForm" action="">Image Name:<br />
<input id="imageName" type="text" name="imageName" value=""><br />
<input class="btn" type="button" value="Generate URLs" id="gen">
<input class="btn" type="reset"><br />
<textarea id="icdnResults"></textarea>
</form>
JS
var processForm = function () {
var value = document.getElementById('imageName').value,
html = '',
imageTag = function (size) {
return 'prefix ' + size + ' <<' + value + '>> suffix ' + size + "\n";
},
sizes = ['text', 'text 2', 'text 3'];
for (var i = 0; i < sizes.length; i++) {
html += imageTag(sizes[i]);
}
document.getElementById('icdnResults').value = html;
};
document.getElementById('gen').addEventListener('click', function() {
processForm();
}, false);
如我的答案和上面的答案所示;在可能的情况下使用unobtrusive javascript是一种好习惯。这将使您的代码保持清洁,并提高可读性和可维护性。
此外,如果您希望支持Internet Explorer 8及更早版本,则需要将addEventListener替换为处理其支持的函数,请参阅此帖子addEventListener in Internet Explorer。