2009-09-16 2 views
8

Ich würde gerne wissen, ob meine Vorgehensweise effizient und korrekt ist. Mein Code funktioniert jedoch nicht, ich weiß nicht warum.Switch-Anweisung in Jquery und Liste

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

Antwort

26

Sie Code funktioniert nicht, weil die Variablen an die Funktion HotelQuery scoped sind. Ich denke, was Sie tun möchten, ist ein Objekt mit Eigenschaften aus der Funktion zurückzugeben, und verwenden Sie auch die unaufdringliche JavaScript-Ansatz, um eine Click-Ereignishandler an das Element <a> zu binden.

So etwas wie

$(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 
    } 
}; 

habe gerade bemerkt, dass Sie auch die gleichen Werte außer der Hotelname und Beschreibung der Rückkehr jedes Mal (Sie dies als Beispiel gerade getan haben könnte, bin ich nicht sicher). Sie können allen Variablen nur ihren Wert bei der Deklaration zuweisen (oder die Werte als Eigenschaften des zurückgegebenen Objekts zuweisen), außer dem Hotelnamen und der Beschreibung, die Sie aus dem Wert des Arguments für den Parameter HotelName zuweisen können. Etwas wie

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

einen Blick auf Crockford großen Artikel „Eine Übersicht über die JavaScript-Programmiersprache“ - http://javascript.crockford.com/survey.html Hinweis: Dies ist wahrscheinlich nicht für absolute Anfänger. –

0

Es gibt ein paar Änderungen, die ich machen würde.

Ziehen Sie die HotelQuery Funktion aus der ready Funktion.

Zweitens werden alle diese Variablen zu dem Zeitpunkt, an dem Sie den Alarmaufruf ausführen, nicht mehr verfügbar sein. Wenn Sie möchten, dass sie im Gültigkeitsbereich sind, deklarieren Sie sie global (außerhalb Ihrer Funktion) und setzen Sie sie in die Funktion.

var name; 

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

Mehrere Probleme.

1) Es besteht keine Notwendigkeit für die Funktion innerhalb $(document).ready zu sein, loszuwerden.


2) Jeder Fall Anweisung sollte von einem break folgen, nicht ein einsamen ;. Zum Beispiel:

function HotelQuery(HotelName) { 
    switch (HotelName) { 
    case 'TetrisHotel': 
     // stuff goes here ... 
     break; //end Tetris Hotel 
    }; 
} 

3) alert sollte nicht von einem : in Ihrem onclick Handler folgen:

alert: (strHotelName, strHotelDesc, strHotelPrice); 

sollte

alert(strHotelName, strHotelDesc, strHotelPrice); 

Auch sein

alert nur dauert ein Parameter, also müssen Sie es aufteilen:

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

3) Sie gehen davon aus strHotelName, strHotelDesc und strHotelPrice sind im globalen Bereich, was sie nicht sind.

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

Platzierung/n in Seite der Zeichenfolge in einer Alert-Box ermöglicht es Ihnen, mehrere Vars mit geschickter Leitung anzuzeigen:


Insgesamt könnten Sie so etwas versuchen wollen bricht in einer Alarmbox.

myVar1= Data 
myVar2= more Data 
+0

/n oder meinst du \ n? – curtisk