我的jquery脚本只适用于mozilla.Chrome、IE、Safari和Opera不适用于我的jquery

我正在开发一个网站，目前我仍在注册过程中。当我要求用户注册我的网站时，他们需要选择团队的人数。当我在选择框中选择人数时，我的网站会根据我选择的人数显示输入字段。这在Mozilla Firefox中运行良好（Mozilla/5.0（X11；U；Linux x86_64；en-US；rv:1.9.2.24）Gecko/20111109 Cents/3.6.4-3.el6.CentOS Firefox/3.6.24）。

尽管如此，其他web浏览器不会根据我选择的人数显示输入字段。

这是以下代码：

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

请注意，我很高兴能得到对这段代码的支持，因为我已经看了好几次了，但我找不到错误。我注意到这不是我注册部分的最终设计。

干杯。

这里有一个实时演示

您需要更改您的选项单击选择的更改事件。您还可以删除选项的名称和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 
});

并关闭选择的

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

最后通过验证器运行代码

您已经打开了具有相同ID的LI和两个div，据我所知，在没有看到CSS的情况下，它们是无用的跨度。

这是一个清理版本

实时演示

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

我不认为option是一个可以点击的元素（至少以跨浏览器兼容的方式）。最好依赖select元素的change事件：

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

同时关闭<select>元素。

最后，检查#loscuatrodiv元素：li必须是ul或ol元素的子元素。

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>
<ul>或<ol>之外不能有<li>

这是正确的形式：

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

相关内容

最新更新

热门标签：