0


私はごく最近、仕事で役立つように Javascript を学び始めました。

アイデア:
フォームを使用して、入力された情報の 1 つを取得し、その情報に事前定義された値をプレフィックスとサフィックスとして付け、それをテキストエリアに出力して、コピー/使用できるようにします。

なんらかの理由で、これまでのところ 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% 確信しています。

変数をもっと使用して定義する必要がありますか、それともまったく異なる方法がありますか?

私が正しい軌道に乗っているのか、それとも完全に廃棄する必要があるのか​​ を誰かが知ることができれば、それは大歓迎です.

ありがとう :) アレックス

EDIT
これを読んでくれた人には申し訳ありません。プレフィックスとサフィックスの両方に 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 つの異なる値があり、"&" には 4 つの完全に異なる値もあります。

EDIT 2
わかりました、ジョンの返信によると...私はそれを少し微調整しました。それはどのように見えますか？コードを変更する私の最初の試みとしてのゴミですか？

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);
});
4

2 に答える 2

1

もしかしてこういうこと？

http://jsfiddle.net/nvLx9/2/

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);
于 2013-11-07T09:39:25.753 に答える