jquery各配列が

Question

の場合jQueryを使用して選択ボックスを作成しました。ここに私のバイオリンは、次のとおりです。http://jsfiddle.net/andreaszeike/gff1r5dr/3/

それが出回っ罰金働いていますが、コードを簡略するために私を助けることができます。

$(document).ready(function() { 
    $('#link-button a ').attr("href", "http://test/") 
}); 

$('select[name=model]').change(function() { 

    //keine Auswahl 
    if ($(this).val() == '') { 
     $(document).ready(function() { 
      $('#link-button a ').attr("href", "http://test/") 
     }); 
    } else 

    //alfa-Romeo 
    if ($(this).val() == 'ar-1') { 
     $(document).ready(function() { 
      $('#link-button a ').attr("href", "http://test/alfa-romeo/giulietta/") 
     }); 
    } else 

    if ($(this).val() == 'ar-2') { 
     $(document).ready(function() { 
      $('#link-button a ').attr("href", "http://test/alfa-romeo/mito/") 
     }); 

    } else 
    if ($(this).val() == 'ar-3') { 
     $(document).ready(function() { 
      $('#link-button a ').attr("href", "http://test/alfa-romeo/spider/") 
     }); 
    } else 


    //Alpina 
    if ($(this).val() == 'alp-1') { 
     $(document).ready(function() { 
      $('#link-button a ').attr("href", "http://test/alpina/alpina-b3/") 
     }); 
    } else 

    if ($(this).val() == 'alp-2') { 
     $(document).ready(function() { 
      $('#link-button a ').attr("href", "http://test/alpina/alpina-b5/") 
     }); 
    } else 

    if ($(this).val() == 'alp-3') { 
     $(document).ready(function() { 
      $('#link-button a ').attr("href", "http://test/alpina/alpina-b10/") 
     }); 
    } else 

    if ($(this).val() == 'alp-4') { 
     $(document).ready(function() { 
      $('#link-button a ').attr("href", "http://test/alpina/alpina-rs/") 
     }); 
    } else {} 

}); 

私はいくつかの例（https://www.sitepoint.com/jquery-each-function-examples/）を見つけたが、私は私にそれを転送するために管理していませんでした例ジェット。

Answer 1

あなたはこのように、キーと値のオブジェクトの配列を作成し、switchステートメント

$('select[name=model]').change(function() { 
    var valuee = $(this).val(); 
    $(document).ready(function() { 
     switch(valuee) 
     { 
     case '': 
      $('#link-button a ').attr("href", "http://test/"); 
      break; 
     case 'ar-1': 
      $('#link-button a ').attr("href", "http://test/alfa-romeo/giulietta/"); 
      break; 
     case 'ar-2': 
      $('#link-button a ').attr("href", "http://test/alfa-romeo/mito/"); 
      break; 
     case 'ar-3': 
      $('#link-button a ').attr("href", "http://test/alfa-romeo/spider/") 
      break; 
     case 'alp-1': 
       $('#link-button a ').attr("href", "http://test/alpina/alpina-b3/") 
      break; 
     case 'alp-2': 
      $('#link-button a ').attr("href", "http://test/alpina/alpina-b5/") 
      break; 
     case 'alp-3': 
       $('#link-button a ').attr("href", "http://test/alpina/alpina-b10/") 
      break; 
     case 'alp-4': 
      $('#link-button a ').attr("href", "http://test/alpina/alpina-rs/") 
      break; 
     default : 
      $('#link-button a ').attr("href", "http://test/"); 
      break; 
    } 

    }); 


}); 

Answer 2

を使用することができます。

$(document).ready(function() { 
    $('#link-button a ').attr("href", "http://test/") 
}); 

nameUrlArray = [ 
    { 
     key: '' 
     value: '' 
    }, 
    { 
     key: 'ar-1' 
     value: 'alfa-romeo/giulietta/' 
    }, 
    { 
     key: 'ar-2' 
     value: 'alfa-romeo/mito/' 
    }, 
    { 
     key: 'ar-3' 
     value: 'alfa-romeo/spider/' 
    }, 
    { 
     key: 'alp-1' 
     value: 'alpina/alpina-b3/' 
    }, 
    { 
     key: 'alp-2' 
     value: 'alpina/alpina-b5/' 
    }, 
    { 
     key: 'alp-3' 
     value: 'alpina/alpina-b10/' 
    }, 
    { 
     key: 'alp-4' 
     value: 'alpina/alpina-rs/' 
    }  
] 

$('select[name=model]').change(function() { 


     $(document).ready(function() { 
      $('#link-button a ').attr("href", "http://test/" + nameUrlArray.find(element => element.key == $(this).val()).value 
     }); 

}); 

私は今それをテストすることができませんでしたが、これはトリックを行う必要があります。新しい "if"を追加して多くのコードを単純化するには、配列へのオブジェクトが必要です。

Answer 3

$(document).ready()は一度だけ必要です。 if elseではなく、このシナリオではスイッチケースを使用してください。 URL、jQueryオブジェクトなどの変数を宣言して再利用します。

$(document).ready(function() { 
    var $linkBtn = $('#link-button a '); 
    $linkBtn.attr("href", "http://test/") 

    $('select[name=model]').change(function() { 
     var sel = $(this).val(), 
     url = ''; 

     switch (sel) { 
     //alfa-Romeo 
     case 'ar-1': 
      url = 'http://test/alfa-romeo/giulietta/'; 
      break; 
     case 'ar-2': 
      url = 'http://test/alfa-romeo/mito/'; 
      break; 
     case 'ar-3': 
      url = 'http://test/alfa-romeo/spider/'; 
      break; 
     case 'alp-1': 
      url = 'http://test/alpina/alpina-b3/'; 
      break; 
     case 'alp-2': 
      url = 'http://test/alpina/alpina-b5/'; 
      break; 
     case 'alp-3': 
      url = 'http://test/alpina/alpina-b10/'; 
      break; 
     case 'alp-4': 
      url = '"http://test/alpina/alpina-rs/'; 
      break; 
     default: 
      //keine Auswahl 
      url = 'http: //test/'; 
     } 

     $linkBtn.attr("href", url); 
    }); 
    }); 

Here is the fiddle。