0

私の質問をよりよく理解するためだけに JSFiddle を作成しました。

したがって、ここにコードを貼り付ける必要はありません。すべてがフィドルで表示されます。JS部分を貼り付けます。

JSフィドル

$('select[name="chooseGW"]').change(function(){
if ($(this).val() == "fileiceGW") {
    $('input#fileiceGW').css('display', 'block');
} else {
    $('input#fileiceGW').css('display', 'none');
}

if ($(this).val() == "adworkGW") {
    $('input#adworkGW').css('display', 'block');
} else {
    $('input#adworkGW').css('display', 'none');
}

if ($(this).val() == "cpaleadGW") {
    $('input#cpaleadGW').css('display', 'block');
} else {
    $('input#cpaleadGW').css('display', 'none');
}
});​

わかりました...私の質問は、このコードをより良くして短くする方法です。確かにできると思います...データゲートウェイを指定されたIDまたは何かと一致させるようなもの...

JSfiddle のコードは問題なく動作しますが、重複が多すぎると思います。

あなたの助けに感謝します、ありがとう!

短縮コードがどのように機能するか、および何のために指定されているかについてのPSの説明は、さらに高く評価されます。

4

3 に答える 3

3

最も簡単な更新は次のとおりです。

$('select[name="chooseGW"]').change(function() {
    var val = $(this).val();
    $('input').hide();
    $('#' + val).show();
});​

JS フィドルのデモ。

このバージョンでは、選択した要素を表示するときに他のすべてのinput要素を非表示にすることを前提としています。以前に表示されinputた要素を表示したままにする場合は、 で終わる行を省略しhide()ます。

$('select[name="chooseGW"]').change(function() {
    var val = $(this).val();
    $('#' + val).show();
});​

JS フィドルのデモ。

もちろん、(多かれ少なかれ) 不要な変数の作成を省略できます。

$('select[name="chooseGW"]').change(function() {
    $('input').hide();
    $('#' + $(this).val()).show();
});​

JS フィドルのデモ。

参考文献:

于 2012-11-09T22:55:10.853 に答える
1 
<select name="chooseGW">
    <option value="noneGW">-- none --</option>
    <option value="fileiceGW">Fileice Gateway</option>
    <option value="adworkGW">Adworkmedia Gateway</option>
    <option value="cpaleadGW">CPALead Gateway</option>
</select>

<div style="display: inline;" >
    <input type="text" id="fileiceGW" style="display: none;" value="fileice()" /> 
    <input type="text" id="adworkGW" style="display: none;" value="adwork()" /> 
    <input type="text" id="cpaleadGW" style="display: none;" value="cpalead()" />
</div>​

var inputs = {
    fileiceGW: "input#fileiceGW",
    adworkGW: "input#adworkGW",
    cpaleadGW: "input#cpaleadGW"
};

$(function () {
    $('select[name="chooseGW"]').change(function () {
        $("input").hide();
        var val = $(this).val();
        var selector = inputs[val];
        $(selector).show();
    });
});
于 2012-11-09T23:26:26.040 に答える
0 
$('select[name="chooseGW"]').on('change', function() {
    $('input').hide();
    if(this.value !== 'noneGW') {
        $('#' + this.value).show();
    }
});

http://jsfiddle.net/f0t0n/tHckA/

于 2012-11-09T22:56:46.590 に答える