оператор переключения в Jquery и List - PullRequest
Новая
       12

оператор переключения в Jquery и List

8 голосов
/ 16 сентября 2009

Я хотел бы знать, насколько эффективен и корректен мой подход. хотя мой код не работает, я не знаю почему. 

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

Ответы [ 4 ]

27 голосов
/ 16 сентября 2009

Ваш код не работает, потому что переменные ограничены функцией HotelQuery. Я думаю, что вы, возможно, захотите сделать, это вернуть объект со свойствами из функции, а также использовать ненавязчивый подход JavaScript, чтобы связать обработчик события click с элементом <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']
    } 
}
8 голосов
/ 17 сентября 2009

Несколько проблем.

1) Нет необходимости, чтобы функция была в пределах $(document).ready, избавьтесь от этого.

2) После каждого оператора case следует break, а не одиночный ;. Например: 

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

3) alert не должен сопровождаться : в вашем обработчике onclick: 

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>
2 голосов
/ 13 декабря 2012 
alert("myVar1= " + myVar1 +"/n"+ "myVar2= " + myVar2);

Помещение / n сбоку от вашей строки в окне предупреждения позволит вам отобразить несколько переменных с изящными разрывами строк в окне предупреждения. 

myVar1= Data
myVar2= more Data
0 голосов
/ 16 сентября 2009

Есть пара изменений, которые я бы сделал.

Извлеките функцию HotelQuery из функции ready.

Во-вторых, все эти переменные выйдут из области действия к тому времени, когда вы сделаете предупреждающий вызов. Если вы хотите, чтобы они находились в области видимости, объявите их глобально (вне вашей функции) и установите их внутри функции. 

var name;

function doStuff() {
  name = "reggie";
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...