2009-09-16 10 views
8

Vorrei sapere se il mio approccio è efficiente e corretto. il mio codice però non funziona, non so perché.in Jquery e Lista

<!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> 

risposta

26

codice Lei non funziona perché le variabili sono scope alla funzione HotelQuery. Penso che quello che potresti voler fare è restituire un oggetto con proprietà dalla funzione, e anche usare l'approccio discreto di JavaScript 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 
    } 
}; 

appena notato che si sta tornando anche gli stessi valori diversi dal nome di un hotel e la descrizione ogni volta (voi avranno fatto questo solo per fare un esempio, non sono sicuro). Si può semplicemente assegnare a tutte le variabili il loro valore sulla dichiarazione (o assegnare i valori come proprietà dell'oggetto restituito), oltre al nome e alla 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'] 
    } 
} 
+1

un'occhiata a grande articolo di Crockford "A Survey del linguaggio di programmazione JavaScript" - http://javascript.crockford.com/survey.html Nota: questo probabilmente non è per i principianti assoluti. –

0

Ci sono un paio di modifiche che vorrei fare.

Estrarre la funzione HotelQuery dalla funzione ready.

Secondo tutte queste variabili saranno fuori dal campo di applicazione dal momento in cui si effettua la chiamata di avviso. Se desideri che siano inclusi nella portata, dichiarali globalmente (fuori dalla tua funzione) e inseriscili all'interno della funzione.

var name; 

function doStuff() { 
    name = "reggie"; 
} 
8

Diversi problemi.

1) Non è necessario che la funzione sia entro $(document).ready, eliminarla.


2) Ogni istruzione case dovrebbe essere seguita da un break, non un solo ;. Per 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, alert richiede solo un parametro, quindi è necessario suddividerlo:

alert(strHotelName); alert(strHotelDesc); alert(strHotelPrice); 

3) Si sta assumendo strHotelName, strHotelDesc e strHotelPrice sono nella portata globale, che non lo sono.


Complessivamente, si potrebbe desiderare di provare qualcosa di simile:

<!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> 
2
alert("myVar1= " + myVar1 +"/n"+ "myVar2= " + myVar2); 

Collocamento/n nel lato della stringa in una finestra di avviso vi permetterà di visualizzare più Vars con la linea elegante si rompe in una casella di avviso.

myVar1= Data 
myVar2= more Data 
+0

/n o intendevi \ n? – curtisk

Problemi correlati