不正确地读取HTML数据

时间：2014-04-07 07:47:13

标签： javascript

我在这里遇到了问题。

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

例如，当我勾选A ...时，它显示的是C而不是正确的A，应该是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>

2 个答案:

答案 0 :(得分：0)

看起来你的html结构非常糟糕。 您在列表中遗漏了一些<li> 

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

应该是

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

答案 1 :(得分：0)

我在你的html / js做了很多改动（bcoz我有一些空闲时间:)）

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

  1. id应该是唯一的。使用元素类
  2. 正确的doctype和html使用jquery / javascript
  3. 只有一个document.ready（）就够了
  4. 有足够的jquery选择器来处理表单元素。你可以试试

    5. HTML：

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

    JS：

    $(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.!!");
     }
});

    }）;

    最后jsfiddle示例：http://jsfiddle.net/yJ8rV/

相关问题
最新问题