使用循環產生XML輸出？

我正在嘗試使用select元素來生成jQuery和XML的動態輸出。但是當我到達if語句時，XML每個循環僅使用三明治上的第一個ID。如何使if語句針對選定的ID測試每個三明治ID？每次運行它時，它都會爲四個循環中的每一個使用「意大利」ID。使用循環產生XML輸出？

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Sandwiches</title> 
    <link rel="stylesheet" type="text/css" href="css/reset.css"/> 
    <link rel="stylesheet" type="text/css" href="css/site.css"/> 
    <script language="javascript" type="text/javascript" src="jquery-2.1.0.min.js"></script> 
</head> 
<body> 
    <header> 
     <h1>Nick's Sandwich Shop</h1> 
    </header> 
    <section id="main"> 
      <section id="selection"> 
      <h2>Please select a sandwich</h2> 
      <select id="selector"> 
       <option>Select One...</option> 
       <option id="TheItalian">The Italian</option> 
       <option id="BLTPlus1">BLT+1</option> 
       <option id="TheBillyClub">The Billy Club</option> 
       <option id="FrenchDip">French Dip</option> 
      </select> 
      </section> 
      <script> 
      $(document).ready(function() { 
        $("#selector").change(function() { 
         var sandwichChoice = $(this).children(":selected").attr("id"); 
         $.ajax({ 
          url: "sandwiches.xml", 
          dataType: "xml", 
          success: function(data){ 
           var $xml = $(data); 
           var $sandwich = $xml.find("sandwich"); 
           alert($sandwich.length); 
           $sandwich.each(function(){ 
            console.log($sandwich.attr("id")); 
            console.log(sandwichChoice); 
            if ($sandwich.attr("id") == sandwichChoice) { 
             var $name = $(this).find("name"); 
             alert($name.text()); 
            }; 
           }); 
          }}); 
         }); 
        }); 

      </script> 
    </section> 
</body> 
</html>

我的XML數據

<sandwiches> 
    <sandwich id="TheItalian"> 
     <name>The Italian</name> 
     <bread>Italian</bread> 
     <meat>Black forest ham and salami</meat> 
     <cheese>Provolone</cheese> 
     <veggies>Lettuce, tomatoes, onions, and mild peppers</veggies> 
     <dressing>Italian oil</dressing> 
    </sandwich> 
    <sandwich id="BLTPlus1"> 
     <name>BLT+1</name> 
     <bread>Sourdough</bread> 
     <meat>Bacon and more bacon</meat> 
     <cheese>Cheddar</cheese> 
     <veggies>Lettuce and tomatoes</veggies> 
     <dressing>Spicy garlic mayo</dressing> 
    </sandwich> 
    <sandwich id="TheBillyClub"> 
     <name>The Billy Club</name> 
     <bread>Rye</bread> 
     <meat>Turkey, bacon and black forest ham</meat> 
     <cheese>Cheddar and Swiss</cheese> 
     <veggies>Lettuce, tomatoes, </veggies> 
     <dressing>Honey mustard and mayo</dressing> 
    </sandwich> 
    <sandwich id="FrenchDip"> 
     <name>French Dip</name> 
     <bread>Baguette</bread> 
     <meat>Roast beef</meat> 
     <cheese>Melted Cheddar</cheese> 
     <veggies>Grilled onions</veggies> 
     <dressing>Au jus</dressing> 
    </sandwich> 
</sandwiches>

來源

2014-05-09 Shaun

爲什麼$三明治？我的意思是你爲什麼使用$與一個變量只要說'var sandwich = data.find（「sandwich」）;' – progrAmmar

考慮這個修訂JQ你的AJAX成功回調：

success: function(xml){ 
    $(xml).find("sandwich").each(function(){ 
     if ($(this).attr("id") == sandwichChoice) { 
      var $name = $(this).find("name"); 
      alert($name.text()); 
     }; 
    }); 
}

我相信這個問題是這條線......

if ($sandwich.attr("id")

...因爲$sandwich是XML中所有三明治項目的jQ集合，而不是單個三明治。

另外，如果你不反對/無法使用「值」屬性對你<選項>元素，選擇你的「sandwichChoice」將與「值」屬性更容易存在：

$("#selector").change(function() { 
    var sandwichChoice = $(this).val(); 
    ... 
});

來源

2014-05-09 02:58:33 Stevangelista

謝謝！我知道我可能錯過了一些愚蠢的東西。另外，感謝您使用val（）的建議，這樣做效果更好。 – Shaun

使用循環產生XML輸出？

回答

相關問題