jquery if then each arrays

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/），但我並沒有設法將其轉移我的例如jet。

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。