我的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

回答

相关问题