2009-09-16 20 views
8

Me gustaría saber si mi enfoque es eficiente y correcto. mi código no está funcionando, no sé por qué.instrucción de cambio en Jquery y 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> 

Respuesta

26

código no funciona porque las variables están en el ámbito de la función HotelQuery. Creo que lo que podría querer hacer es devolver un objeto con propiedades de la función y también utilizar el enfoque discreto de JavaScript para vincular un controlador de eventos de clic al elemento <a>.

Algo así como

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

di cuenta de que también se está volviendo a los mismos valores que no sean el nombre del hotel y la descripción cada vez (que podría haber hecho esto sólo como un ejemplo, no estoy seguro). Puede asignar todas las variables su valor en la declaración (o asignar los valores como propiedades del objeto devuelto), que no sean el nombre del hotel y la descripción, que podría asignar desde el valor del argumento para el parámetro HotelName. Algo como

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

echar un vistazo a gran artículo de Crockford "Una encuesta de lenguaje de programación JavaScript" - http://javascript.crockford.com/survey.html Nota: esto probablemente no es para principiantes. –

0

Hay un par de cambios que haría.

Extraiga la función HotelQuery de la función ready.

En segundo lugar, todas estas variables estarán fuera de alcance cuando realice la llamada de alerta. Si desea que estén dentro del alcance, declare globalmente (fuera de su función) y configúrelos dentro de la función.

var name; 

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

Varios problemas.

1) No es necesario que la función esté dentro de $(document).ready, deshazte de eso.


2) Cada declaración de caso debe ser seguido por un break, no un solitario ;. Por ejemplo:

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

3) alert no debe ser seguido por un : en su onclick manejador:

alert: (strHotelName, strHotelDesc, strHotelPrice); 

debería ser

alert(strHotelName, strHotelDesc, strHotelPrice); 

Además, sólo toma alert un parámetro, por lo que debe dividirlo:

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

3) Usted está asumiendo strHotelName, strHotelPricestrHotelDesc y están en el alcance global, que no lo son.


En conjunto, es posible que desee probar algo como esto:

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

Colocación/n en el lado de la cadena en un cuadro de alerta le permitirá visualizar múltiples VARs con la línea ingenioso se rompe en un cuadro de alerta.

myVar1= Data 
myVar2= more Data 
+0

/n ¿o quiso decir \ n? – curtisk

Cuestiones relacionadas