jquery if then每个数组
jquery if then每个数组
提问于 2016-11-15 21:01:58
我使用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/)，但我没有设法将其传输到我的示例喷气机上。
回答 3
Stack Overflow用户
发布于 2016-11-15 21:15:59
可以使用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;
}
});
});Stack Overflow用户
发布于 2016-11-15 21:31:41
创建一个键值对象数组，如下所示：
$(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“，并大大简化代码
Stack Overflow用户
发布于 2016-11-15 21:54:01
您只需要$(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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40610500
复制相关文章
相似问题
腾讯云开发者
