我的jquery腳本只適用於mozilla。 Chrome瀏覽器，IE瀏覽器，Safaria和Opera不能用我的jQuery

我正在開發一個網站，目前我堅持註冊過程。當我要求用戶註冊我的網站時，他們需要選擇一個團隊的人數。當我在選擇框中選擇人數時，我的網站會根據我選擇的人數顯示輸入字段。這適用於Mozilla Firefox（Mozilla/5.0（X11; U; Linux x86_64; en-US; rv：1.9.2.24）Gecko/20111109 CentOS/3.6.24-3.el6.centos Firefox/3.6.24）。我的jquery腳本只適用於mozilla。 Chrome瀏覽器，IE瀏覽器，Safaria和Opera不能用我的jQuery

儘管如此，其他網絡瀏覽器並不根據我選擇的人數顯示輸入字段。

這是下面的代碼：

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("#muestra1").click(function(){ 
    $("#loscuatro").hide(); 
    }); 
}); 
$(document).ready(function(){ 
$("#muestra2").click(function(){ 
    $("#loscuatro").show(); 
    }); 
});  
</script> 
</head> 
<body> 
<div id="container" class="ltr">  
    <li><span> 
    <div id="container" class="ltr">  
     <h2>Please give us your name</h2> 
     <ul> 
     <li> 
       <span> 
      Number of team members <select name="integrantes" id="integrantes" >     
       <option name="member1" value="1" id="muestra1" >1</option> 
      <option name="member2" value="2" id="muestra2">2</option> 
     </li><hr /></span> 
<b><h3>Leader</h3></b> 
     <li> 
     <span> 
     Name* <input id="Field0" /></span> 
    </li><hr /> 
<div id="loscuatro"> 
<b><h3>Volunteer</h3></b>   
    <li> 
     <span> 
     Name* <input id="Field0" /></span> 
    </li><hr />  
</div><!--end of volunteer loscuatros--> 
</div> 
</body> 
</html>

請，我會很高興收到支持這一代碼，因爲我已經看了好幾遍，我無法找到的bug。我說這不是我註冊部分的最終設計。

乾杯。

來源

2013-06-24 Alejandro BR

李應UL或OL裏面，你有很多外面混有其它元素！ ..和$（文件）。就緒功能應該結合，因爲這是多餘的，他們將工作作爲一個在年底 – CME64

HTML標籤的嵌套是不妥當的 –

這裏是一個Live demo

你需要改變你的選擇點擊選擇的變化情況。您也可以刪除的選項名稱和ID：

$(function(){ 
    $("#integrantes").on("change",function(){ 
    $("#loscuatro").toggle(this.selectedIndex==1); // second option is option 1 
    }); 
    $("#integrantes").change(); // set to whatever it is at load time 
});

，並通過validator

你解開LIS和兩個div與關閉選擇

<select name="integrantes" id="integrantes" > 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select>

最後運行代碼相同的ID和據我所知，沒有看到CSS，無用的跨度。

這裏是一個清理版本

Live demo

<div id="container" class="ltr">  
    <h2>Please give us your name</h2> 
    <ul> 
    <li> 
     Number of team members 
     <select name="integrantes" id="integrantes" > 
     <option value="1">1</option> 
     <option value="2">2</option> 
     </select> 
    </li> 
    </ul> 
    <h3>Leader</h3> 
    <ul> 
    <li> 
     Name* <input id="Field0" /><hr /> 
    </li> 
    </ul> 
    <div id="loscuatro">  
    <h3>Volunteer</h3> 
    <ul> 
     <li> 
     Name* <input id="Field0" /><hr />  
     </li> 
    </ul> 
    </div><!--end of volunteer loscuatros--> 
</div>

來源

2013-06-24 05:04:43 mplungjan

你好mplungjan！我對提早了答案沒有響應抱歉，但我一直在工作比較忙，我就沒有機會繼續在我的網站。您的解決方案的偉大工程，這是我在幾個論壇中尋找。 –

很高興聽到這個:) – mplungjan

我不認爲option是可以點擊（在跨瀏覽器兼容的方式至少）一個元素。這是更好地依靠change事件select元素：

$(document).ready(function(){ 
    $("#integrantes").change(function(){ 
     var val = $(this).val(); 
     if(val=='1') { 
      $('#loscuatro').hide(); 
     } else { 
      $('#loscuatro').show(); 
     }  
    }); 
});

而且關閉<select>元素。

最後，檢查#loscuatro div元素：li必須是ul或ol元素的子元素。

來源

2013-06-24 05:05:52

有幾件事情錯的HTML：

<body> 
    <div id="container" class="ltr">  
     <h2>Please give us your name</h2> 
     <ul> 
      <li> 
       <span>Number of team members 
        <select name="integrantes" id="integrantes" >     
         <option name="member1" value="1" id="muestra1" >1</option> 
         <option name="member2" value="2" id="muestra2">2</option> 
        </select> 
       </span> 
      </li> 
      <b><h3>Leader</h3></b> 
      <li> 
       <span> 
       Name* <input id="Field0" /></span> 
      </li> 
     </ul> 
    </div> 
    <div id="loscuatro"> 
     <b><h3>Volunteer</h3></b> 
     <ul>   
      <li> 
       <span> 
        Name* <input id="Field0" /> 
       </span> 
      </li><hr /> 
     </ul>  
    </div><!--end of volunteer loscuatros--> 
</body>

你不能有相同的id兩個元素。
大多數HTML標記都需要關閉標籤又名：<li>....</li>
你不能有一個<li>外的<ul>或<ol>

這是正確的形式：

<ul> 
    <li>...</li> 
    <li>...</li> 
</ul>

來源

2013-06-24 05:14:46 stackErr

@mplungjan完成！ – stackErr

我的jquery腳本只適用於mozilla。 Chrome瀏覽器，IE瀏覽器，Safaria和Opera不能用我的jQuery

回答

相關問題