jquery if then 每个数组答案

【问题标题】：jquery if then each arrayjquery if then 每个数组
【发布时间】：2017-03-29 08:59:18
【问题描述】：

我使用 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/)，但我没有设法将其转移到我的示例喷气机上。

【问题讨论】：

标签： jquery arrays each

【解决方案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;
    }

  });


});

【讨论】：

【解决方案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”并大大简化您的代码

【讨论】：

【解决方案3】：

您只需要一次$(document).ready()。在这种情况下使用 switch case 而不是 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.

【讨论】：