Jquery 和 List 中的 switch 语句
Posted
技术标签:
【中文标题】Jquery 和 List 中的 switch 语句【英文标题】：switch statement in Jquery and List 【发布时间】：2010-11-28 22:22:49 【问题描述】：我想知道我的方法是否有效且正确。但我的代码不起作用，我不知道为什么。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function()
function HotelQuery(HotelName)
switch (HotelName)
case 'TimelessHotel':
var strHotelName = 'Timeless Hotel';
var strHotelDesc = 'Hotel Description Timeless Hotel';
var strHotelPrice = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00'];
var strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person'];
; //end Timeless Hotel
case 'ParadiseInn':
var strHotelName = 'Paradise Inn';
var strHotelDesc = 'Hotel Description Paradise Inn';
var strHotelPrice = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00'];
var strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person'];
; //end Paradise Inn
case 'TetrisHotel':
var strHotelName = 'Tetris Hotel';
var strHotelDesc = 'Hotel Description Tetris Hotel';
var strHotelPrice = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00'];
var strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person'];
; //end Tetris Hotel
case 'JamstoneInn':
var strHotelName = 'Jamstone Inn';
var strHotelDesc = 'Hotel Description Jamstone Inn';
var strHotelPrice = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00'];
var strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person'];
; //end Jamstone Inn
;
);
</script>
<title>hotel query</title>
</head>
<body>
<a href="#" onclick="javascript: HotelQuery('TetrisHotel'); alert: (strHotelName, strHotelDesc, strHotelPrice);">Tetris Hotel Query</a>
</body>
</html>
【问题讨论】：
【参考方案1】：您的代码不起作用，因为变量的范围为函数HotelQuery。我认为您可能想要做的是从函数返回一个具有属性的对象，并使用不显眼的 JavaScript 方法将点击事件处理程序绑定到 <a> 元素。
类似
$(function()
$('a').click(function()
var hotel = HotelQuery('TetrisHotel');
alert(hotel.name) // alerts 'Tetris Hotel'
);
);
function HotelQuery(HotelName)
var strHotelName;
var strHotelDesc;
var strHotelPrice;
var strHotelRoomType;
switch (HotelName)
case 'TimelessHotel':
strHotelName = 'Timeless Hotel';
strHotelDesc = 'Hotel Description Timeless Hotel';
strHotelPrice = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00'];
strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person'];
break; //end Timeless Hotel
case 'ParadiseInn':
strHotelName = 'Paradise Inn';
strHotelDesc = 'Hotel Description Paradise Inn';
strHotelPrice = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00'];
strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person'];
break; //end Paradise Inn
case 'TetrisHotel':
strHotelName = 'Tetris Hotel';
strHotelDesc = 'Hotel Description Tetris Hotel';
strHotelPrice = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00'];
strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person'];
break; //end Tetris Hotel
case 'JamstoneInn':
strHotelName = 'Jamstone Inn';
strHotelDesc = 'Hotel Description Jamstone Inn';
strHotelPrice = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00'];
strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person'];
break; //end Jamstone Inn
return
name: strHotelName,
desc: strHotelDesc,
price: strHotelPrice,
roomType: strHotelRoomType
;
刚刚注意到，除了酒店名称和描述之外，您每次都返回相同的值（您可能只是作为示例这样做，我不确定）。您可以在声明时为所有变量分配其值（或将值分配为返回对象的属性），而不是酒店名称和描述，您可以从参数HotelName 的参数值中分配它们。类似的东西
function hotelQuery(hotelName)
return
name: hotelName,
desc: 'Hotel Desciption' + hotelName,
// Keep prices as numbers and have a function to display them
// in the culture specific way. Numbers for prices will be easier to deal with
price: [980, 1300, 1600, 1500, 1800, 300, 150, 200],
roomType: ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person']
【讨论】：
看看 Crockford 的精彩文章“JavaScript 编程语言概览”-javascript.crockford.com/survey.html 注意：这可能不适合绝对的初学者。【参考方案2】：我会做出一些改变。
将HotelQuery 函数拉出ready 函数。
第二，当您发出警报调用时，所有这些变量都将超出范围。如果您希望它们在范围内，请在全局范围内（在您的函数之外）声明它们并将它们设置在函数内部。
var name;
function doStuff()
name = "reggie";
【讨论】：
【参考方案3】：几个问题。
1) 函数不需要在$(document).ready 内，去掉那个。
2) 每个 case 语句后面都应该跟一个break，而不是一个单独的;。例如：
function HotelQuery(HotelName)
switch (HotelName)
case 'TetrisHotel':
// stuff goes here ...
break; //end Tetris Hotel
;
3) 在onclick 处理程序中，alert 后面不应跟 :：
alert: (strHotelName, strHotelDesc, strHotelPrice);
应该是
alert(strHotelName, strHotelDesc, strHotelPrice);
另外，alert 只接受一个参数，所以你需要把它分解：
alert(strHotelName); alert(strHotelDesc); alert(strHotelPrice);
3) 您假设 strHotelName、strHotelDesc 和 strHotelPrice 位于全局范围内，但事实并非如此。
总而言之，您可能想尝试这样的事情：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function HotelQuery(HotelName)
var response =
strHotelName: '',
strHotelDesc: '',
strHotelPrice: [],
strHotelRoomType: []
;
switch (HotelName)
case 'TimelessHotel':
response.strHotelName = 'Timeless Hotel';
response.strHotelDesc = 'Hotel Description Timeless Hotel';
response.strHotelPrice = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00'];
response.strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person'];
break; //end Timeless Hotel
case 'ParadiseInn':
response.strHotelName = 'Paradise Inn';
response.strHotelDesc = 'Hotel Description Paradise Inn';
response.strHotelPrice = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00'];
response.strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person'];
break; //end Paradise Inn
case 'TetrisHotel':
response.strHotelName = 'Tetris Hotel';
response.strHotelDesc = 'Hotel Description Tetris Hotel';
response.strHotelPrice = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00'];
response.strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person'];
break; //end Tetris Hotel
case 'JamstoneInn':
response.strHotelName = 'Jamstone Inn';
response.strHotelDesc = 'Hotel Description Jamstone Inn';
response.strHotelPrice = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00'];
response.strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person'];
break; //end Jamstone Inn
return response;
;
$(document).ready(function()
var infoContainer = $('#hotel-information');
$("#hotel-query").click(function()
var info = HotelQuery('TetrisHotel');
infoContainer.text(info.strHotelName);
);
);
</script>
<title>hotel query</title>
</head>
<body>
<a href="#" id="hotel-query">Tetris Hotel Query</a>
<p id="hotel-information"></p>
</body>
</html>
【讨论】：
【参考方案4】：alert("myVar1= " + myVar1 +"/n"+ "myVar2= " + myVar2);
在警告框中将 /n 放在字符串的一侧将允许您在警告框中显示多个带有漂亮换行符的变量。
myVar1= Data
myVar2= more Data
【讨论】：
以上是关于Jquery 和 List 中的 switch 语句的主要内容，如果未能解决你的问题，请参考以下文章