istruzione switch in Jquery and List
-
07-07-2019 - |
Domanda
Vorrei sapere se il mio approccio è efficiente e corretto. il mio codice non funziona però, non so perché.
<!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>
Soluzione
Il tuo codice non funziona perché le variabili sono impostate sulla funzione HotelQuery
. Penso che ciò che potresti voler fare sia restituire un oggetto con proprietà dalla funzione e utilizzare anche l'approccio JavaScript non discreto per associare un gestore di eventi click all'elemento <a>
.
Qualcosa di simile
$(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
}
};
Ho appena notato che stai restituendo gli stessi valori oltre al nome e alla descrizione dell'hotel ogni volta (potresti averlo fatto solo come esempio, non sono sicuro) . È possibile semplicemente assegnare il valore di tutte le variabili alla dichiarazione (o assegnare i valori come proprietà dell'oggetto restituito), diverso dal nome e dalla descrizione dell'hotel, che è possibile assegnare dal valore dell'argomento per il parametro HotelName
. Qualcosa come
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']
}
}
Altri suggerimenti
Diversi problemi.
1) Non è necessario che la funzione sia all'interno di $(document).ready
, liberarsene.
2) Ogni istruzione del caso dovrebbe essere seguita da un break
, non da un solo ;
. Ad esempio:
function HotelQuery(HotelName) {
switch (HotelName) {
case 'TetrisHotel':
// stuff goes here ...
break; //end Tetris Hotel
};
}
3) alert
non dovrebbe essere seguito da un :
nel onclick
gestore:
alert: (strHotelName, strHotelDesc, strHotelPrice);
dovrebbe essere
alert(strHotelName, strHotelDesc, strHotelPrice);
Inoltre, strHotelName
accetta solo un parametro, quindi è necessario suddividerlo:
alert(strHotelName); alert(strHotelDesc); alert(strHotelPrice);
3) Stai presupponendo che strHotelDesc
, strHotelPrice
e <=> siano nell'ambito globale, cosa che non lo sono.
Nel complesso, potresti provare qualcosa del genere:
<!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>
alert("myVar1= " + myVar1 +"/n"+ "myVar2= " + myVar2);
Posizionando / n sul lato della stringa in una casella di avviso, sarà possibile visualizzare più var con interruzioni di riga eleganti in una casella di avviso.
myVar1= Data
myVar2= more Data
Ci sono un paio di modifiche che vorrei apportare.
Estrai la funzione HotelQuery
dalla funzione ready
.
In secondo luogo tutte queste variabili saranno fuori portata al momento in cui si effettua la chiamata di avviso. Se desideri che siano nell'ambito, dichiarali a livello globale (al di fuori della tua funzione) e impostali all'interno della funzione.
var name;
function doStuff() {
name = "reggie";
}