Javascript 错误地读取HTML数据_Javascript

Javascript 错误地读取HTML数据

javascript

Javascript 错误地读取HTML数据,javascript,Javascript,我这里有个问题我想知道为什么我的页面输出错误例如，当我勾选A时，它显示的是C，而不是正确的A 然后对于最后3个，即J，K，L…它根本不会显示任何东西 <!DOC HTML> <html> <title></title> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"

我这里有个问题

我想知道为什么我的页面输出错误

例如，当我勾选A时，它显示的是C，而不是正确的A

然后对于最后3个，即J，K，L…它根本不会显示任何东西

<!DOC HTML>
<html>
<title></title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-  
1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.cycle.all.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('ul#nav > li').click(function () {
            selfActive = $(this).hasClass("show") ? true : false;
            $(".show").removeClass("show").find("ul").slideDown();
            if (!selfActive) {
                $(this).addClass("show").find("ul").slideDown();
            }

        });
    });
    $(document).ready(function () {
        $("input[name='Option']").change(function () {
            var maxAllowed = 3;
            var cnt = $("input[name='Option']:checked").length;
            if (cnt > maxAllowed) {
                $(this).prop("checked", "");
                alert('You can select maximum ' + maxAllowed + ' phones only!!');
            }
        });
    });
    $(document).ready(function () {
        $('input[type="submit"]').click(function () {
            if ($('input[name=Option]:checked').length > 1) {
                $('.frame-wrapper').fadeOut();
                $('input[name=Option]').each(function () {
                    if ($(this).prop("checked")) {
                        $('.frame-wrapper').eq($(this).index() - 1).fadeIn();
                    }
                });
            }
            else {
                alert("You must compare with more than 1 item.!!");
            }
        });
        $('input[type="compare"]').click(function () {
            $('.frame-wrapper').eq($(this).index() - 1).fadeIn();
        });

    });

</script>
<style type="text/css">
    .frame-wrapper {
        display: none;
        float: left;
        width: 32%;
        margin-top: 20px;
        margin-right: 1%;
        border-radius: 30px;
        background-color: #eee;
    }
    #nav li > ul {
        display: none;
    }
</style>
</head>
<body>
<b>Please select an option</b>
<hr>
<ul id="nav">
    <li>
        <a href="#">Category 1</a>

        <ul>
            <li>
                A <input type="checkbox" name="Option" />
                B <input type="checkbox" name="Option" />
                C  <input type="checkbox" name="Option" />
        </ul>
    </li>
    </ul></hr>
    <hr>

    <ul id="nav">
        <li>
            <a href="#">Category 2</a>

            <ul>
                <li>
                    D <input type="checkbox" name="Option" />
                    E <input type="checkbox" name="Option" />
                    F  <input type="checkbox" name="Option" />
            </ul>
        </li>
        </hr>
        </ul><hr>
        <ul id="nav">
            <li>
                <a href="#">Category 3</a>

                <ul>
                    <li>
                        G <input type="checkbox" name="Option" />
                        H <input type="checkbox" name="Option" />
                        I  <input type="checkbox" name="Option" />
                </ul>
            </li>
            </hr>
            </ul><hr>
            <ul id="nav">
                <li>
                    <a href="#">Category 4</a>

                    <ul>
                        <li>
                            J <input type="checkbox" name="Option" />
                            K <input type="checkbox" name="Option" />
                            L  <input type="checkbox" name="Option" />
                    </ul>
                </li>
                </ul></hr>
                <input type="submit" value="Compare" />
                <form>
                    <input type="button" value="Clear"  
onclick="window.location.href=window.location.href">
                </form>


                <div style="clear: both;"></div>

                <div id="tblA" class="frame-wrapper">
                    <b><em>You Selected A</em></b>
                </div>
                <div id="tblB" class="frame-wrapper">
                    <b><em>You Selected B</em></b>
                </div>
                <div id="tblC" class="frame-wrapper">
                    <b><em>You Selected C</em></b>
                </div>
                <div id="tblD" class="frame-wrapper">
                    <b><em>You Selected D</em></b>
                </div>
                <div id="tblE" class="frame-wrapper">
                    <b><em>You Selected E</em></b>
                </div>
                <div id="tblF" class="frame-wrapper">
                    <b><em>You Selected F</em></b>
                </div>
                <div id="tblG" class="frame-wrapper">
                    <b><em>You Selected G</em></b>
                </div>
                <div id="tblH" class="frame-wrapper">
                    <b><em>You Selected H</em></b>
                </div>
                <div id="tblI" class="frame-wrapper">
                    <b><em>You Selected I</em></b>
                </div>
                <div id="tblJ" class="frame-wrapper">
                    <b><em>You Selected J</em></b>
                </div>
                <div id="tblK" class="frame-wrapper">
                    <b><em>You Selected K</em></b>
                    <div id="tblL" class="frame-wrapper">
                        <b><em>You Selected L</em></b>
                    </div>
                </div>





</body>
</html>


$（文档）.ready（函数（）{
$（'ul#nav>li'）。单击（函数（）{
selfActive=$（this）.hasClass（“show”）？true:false；
$（“.show”）.removeClass（“show”）.find（“ul”）.slideDown（）；
如果（！自激活）{
$（this.addClass（“show”）.find（“ul”）.slideDown（）；
}
});
});
$（文档）.ready（函数（）{
$（“输入[name='Option']”）。更改（函数（）{
var最大允许值=3；
var cnt=$（“输入[name='Option']：选中”）.length；
如果（cnt>maxAllowed）{
$（this.prop（“选中”和“”）；
警报（'您只能选择最大'+maxAllowed+'手机！！'）；
}
});
});
$（文档）.ready（函数（）{
$（'input[type=“submit”]”）。单击（函数（）{
如果（$（'input[name=Option]：选中'）。长度>1）{
$（'.frame wrapper'）.fadeOut（）；
$（'input[name=Option]'）。每个（函数（）{
如果（$（this）.prop（“选中”））{
$（'.frame wrapper'）.eq（$（this.index（）-1.fadeIn（）；
}
});
}
否则{
警告（“您必须与多个项目进行比较！！”；
}
});
$（'input[type=“compare”]”）。单击（函数（）{
$（'.frame wrapper'）.eq（$（this.index（）-1.fadeIn（）；
});
});
.框架包装{
显示：无；
浮动：左；
宽度：32%；
边缘顶部：20px；
保证金权利：1%；
边界半径：30px；
背景色：#eee；
}
#nav li>ul{
显示：无；
}
请选择一个选项





A.
B
C








D
E
F








G
H
我








J
K
L



您选择了一个
你选择了B
你选择了C
你选择了D
你选择了E
您选择了F
你选择了G
你选择了H
你选择了我
你选择了J
你选择了K
你选择了L

看起来您的html结构相当糟糕。您的列表中缺少一些

             <li>
                <a href="#">Category 3</a>

                <ul>
                    ***<li>
                        G <input type="checkbox" name="Option" />
                        H <input type="checkbox" name="Option" />
                        I  <input type="checkbox" name="Option" />***
                </ul>
            </li>



***
G
H
我***

应该是

     <li>
        <a href="#">Category 3</a>

        <ul>
            ***<li> G <input type="checkbox" name="Option" /></li>
                <li>H <input type="checkbox" name="Option" /></li>
                <li>I  <input type="checkbox" name="Option" /></li>***
        </ul>
    </li>



***G
H
我***

我对你的html/js做了很多修改（我有一些空闲时间：）

复制/粘贴前应注意的事项：

id应该是唯一的。对元素使用类

正确的doctype和html以使用jquery/javascript

只有一个document.ready（）就足够了

有足够的jquery选择器来处理表单元素。你可以试试

HTML:

}))

最后，jsfiddle示例也是：

更正您的doctype声明并使用propper html，因为缺少一些结束li。

selfActive=$（this）.hasClass（“show”）？真：假--这里不需要三元运算符.hasClass（）返回一个布尔值。@kSingh，嗯？不应该是吗&我已经添加了丢失的李，不幸的是仍然是一样的。它正在读取数据inconsistently@Scimonster，如果我要删除它..我将无法扩展我的列表。@user3500105不是，是的。颜色更改应该让您明白这一点。您好，谢谢您更正我..但即使已应用更正。还是一样-（好吧，如果我把所有这些都放在同一行中..他们将能够得到正确的输出。但是一行中的12项在我看来很奇怪。因此，我将3项分成每行并开始得到不一致的读数。
<b>Please select an option</b>
<hr>
<ul class="nav">
<li><a href="#">Category 1</a>
    <ul>
        <li>
            A <input type="checkbox" value="A" name="Option" />
            B <input type="checkbox" value="B" name="Option" />
            C  <input type="checkbox" value="C" name="Option" />
        </li>
    </ul>
</li>
</ul>
<hr>
<ul class="nav">
    <li>
        <a href="#">Category 2</a>
        <ul>
            <li>
                D <input type="checkbox" value="D" name="Option" />
                E <input type="checkbox" value="E" name="Option" />
                F  <input type="checkbox" value="F" name="Option" />
            </li>
        </ul>
    </li>
    </ul><hr>
    <ul class="nav">
        <li>
            <a href="#">Category 3</a>
            <ul>
                <li>
                    G <input type="checkbox" value="G" name="Option" />
                    H <input type="checkbox" value="H" name="Option" />
                    I  <input type="checkbox" value="I" name="Option" />
                </li>
            </ul>
        </li>
        </ul><hr>
        <ul class="nav">
            <li>
                <a href="#">Category 4</a>
                <ul>
                    <li>
                        J <input type="checkbox" value="J" name="Option" />
                        K <input type="checkbox" value="K" name="Option" />
                        L  <input type="checkbox" value="L" name="Option" />
                    </li>
                </ul>
            </li>
            </ul></hr>
            <input type="submit" value="Compare" />
            <div style="clear: both;"></div>
            <div id="tblA" class="frame-wrapper">
                <b><em>You Selected A</em></b>
            </div>
            <div id="tblB" class="frame-wrapper">
                <b><em>You Selected B</em></b>
            </div>
            <div id="tblC" class="frame-wrapper">
                <b><em>You Selected C</em></b>
            </div>
            <div id="tblD" class="frame-wrapper">
                <b><em>You Selected D</em></b>
            </div>
            <div id="tblE" class="frame-wrapper">
                <b><em>You Selected E</em></b>
            </div>
            <div id="tblF" class="frame-wrapper">
                <b><em>You Selected F</em></b>
            </div>
            <div id="tblG" class="frame-wrapper">
                <b><em>You Selected G</em></b>
            </div>
            <div id="tblH" class="frame-wrapper">
                <b><em>You Selected H</em></b>
            </div>
            <div id="tblI" class="frame-wrapper">
                <b><em>You Selected I</em></b>
            </div>
            <div id="tblJ" class="frame-wrapper">
                <b><em>You Selected J</em></b>
            </div>
            <div id="tblK" class="frame-wrapper">
                <b><em>You Selected K</em></b>
            </div>
            <div id="tblL" class="frame-wrapper">
               <b><em>You Selected L</em></b>
            </div>

$(document).ready(function () {
    $('ul.nav > li').click(function () {
       $(this).find("ul").slideDown();
    });

    $(":checkbox").change(function () {
      var maxAllowed = 3;
      var cnt = $(":checkbox:checked").length;
      if (cnt > maxAllowed) {
         $(this).prop("checked", "");
         alert('maximum ' + maxAllowed);
      }
   });

   $(':submit').click(function () {
      if ($(':checkbox:checked').length > 1) {
          $('.frame-wrapper').fadeOut();
          $(':checkbox').each(function () {
           if ($(this).prop("checked")) {
              $('#tbl' + $(this).val()).fadeIn();
           }
         });
     }
     else {
          alert("You must compare with more than 1 item.!!");
     }
});