Question

此FIDDLE正常。但是，当我将其粘贴到记事本中并保存为.html时，它无效。为什么？

$("input[type='checkbox']").change(function() {
    var val = $(this).val();    
    $("#mytable tr:first").find("th:eq("+val+")").toggle();
    $("#mytable tr").each(function(){
        $(this).find("td:eq("+val+")").toggle();
    });
    if($("#mytable tr:first").find("th:visible").length > 0){
        $("#mytable").removeClass("noborder");
    }
    else{
        $("#mytable").addClass("noborder");
    }
});
$("#selector").click(function() {
    $("#main").toggle();
    $("p").toggle();
});

我正在制作一个下拉复选框。这是我发现的答案。

这是我的html文件

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Draggable - Constrain movement</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>




<!-- Include the DropDownCheckList supoprt -->
    <script type="text/javascript" src="js/ui.dropdownchecklist.js"></script>


<script type="text/javascript">
        $("input[type='checkbox']").change(function() {
    var val = $(this).val();    
    $("#mytable tr:first").find("th:eq("+val+")").toggle();
    $("#mytable tr").each(function(){
        $(this).find("td:eq("+val+")").toggle();
    });
    if($("#mytable tr:first").find("th:visible").length > 0){
        $("#mytable").removeClass("noborder");
    }
    else{
        $("#mytable").addClass("noborder");
    }
});
$("#selector").click(function() {
    $("#main").toggle();
    $("p").toggle();
});

    </script>



<style>
body 
{
}

.custom-select {
    position: relative;
    font-family: sans-serif;
    font-size: 93%;

}

.custom-select span {
    display: inline-block;
    min-width: 180px;
    color: #FFF;
    background-color: #333;
    padding: 5px;
    cursor: pointer;
}

td 
{
        color: #FFF;
    background-color: #333;
    min-width: 180px;
             padding: 5px;   


}

.custom-select ul {
    position: absolute;
    display: none;
    border: 1px solid #333;
    width: 99%;
    max-height: 200px;
    overflow: auto;
    z-index: 10000;
}

.custom-select ul li {
    padding: 5px;
    border-bottom: 1px solid #333;
    cursor: pointer;
}

.custom-select ul li:hover {
    background-color: #666;
    color: #FFF;
}

.custom-select ul li:last-child {
    border-bottom: none;
}

h1, h2{
font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:13px;

}
.noborder{border:0;}
table {
            border: 1px solid black;
        }


         }

          table.tabular {
            FONT-SIZE: 13px;
            FONT-FAMILY: 'Verdana, Arial, Helvetica, sans-serif';
            COLOR: #336699;
         }

         table.tabular thead {
             COLOR: #ffffff;
             FONT-WEIGHT: bold;
         }

         table.tabular th{
            background-color:#E10EDA; <!-- Header colour -->
            padding: 4px;
         }

         table.tabular td {
            background-color:#B4D5D4; <!-- Column colour -->
            padding: 2px;
         }

</style>





</head>


<body>


<div id="dropdownframe"></div>

<div class="custom-select">
    <div id="selector"> <span>Select Option</span> </div>

</div>

<div id="main"  style="display: none" > 
    <table>
        <tr>
            <td valign="top" style="width: 165px" ><input type="checkbox" checked="checked" name="vehicle" value="0" /> Index</td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px" ><input type="checkbox" checked="checked" name="vehicle" value="1" /> Parameter Name</td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px" ><input type="checkbox" checked="checked" name="vehicle" value="2" /> Page Name</td>
        </tr>
    </table>
</div>

    </table>
</div>

</div>


<TABLE  id="mytable"  style="width:510px" class="resizable tabular">

<THEAD>

<TR>

<TH class="index" style='width:60px'>Index</TH>

<TH class="param" style='width:170px'><span class="nowrap">Parameter Name</span></TH>

<TH class="page"  style='width:110px'><span class="nowrap">Page Name</span></TH>



</TR>
</THEAD> 
<TBODY style="height:200px">
<TR>

<TD class="index">0</TD>
<TD class="param">1_2</TD>
<TD class="page">1_3</TD>


</TR>

<TR>

<TD class="index">0</TD>
<TD class="param">1_2</TD>
<TD class="page">1_3</TD>


</TR>

<TR>

<TD class="index">0</TD>
<TD class="param">1_2</TD>
<TD class="page">1_3</TD>


</TR>


</body>
</html>

有人可以告诉我为什么吗？这将非常有帮助。

Answer 1

<script type="text/javascript">
        $("input[type='checkbox']").change(function() {
    var val = $(this).val();    
    $("#mytable tr:first").find("th:eq("+val+")").toggle();
    $("#mytable tr").each(function(){
        $(this).find("td:eq("+val+")").toggle();
    });
    if($("#mytable tr:first").find("th:visible").length > 0){
        $("#mytable").removeClass("noborder");
    }
    else{
        $("#mytable").addClass("noborder");
    }
});
$("#selector").click(function() {
    $("#main").toggle();
    $("p").toggle();
});

    </script>

小提琴会在解析html时执行你的代码，这样你的javascript就可以访问完整的html内容

您将代码写入浏览器将在符合javascript时解析并执行

这里的问题很简单：当你的代码执行时，浏览器不解析html所以它

无法找到您需要的元素。

两种解决方法：

1.将您的javascript代码移到您的身体底部：就在</body>

之前

监听窗口上的load事件，并在jquery中将javascript代码放入其中，你可以这样做：

$（function（）{//在这里添加包装代码

    $("input[type='checkbox']").change(function() {
var val = $(this).val();    
$("#mytable tr:first").find("th:eq("+val+")").toggle();
$("#mytable tr").each(function(){
    $(this).find("td:eq("+val+")").toggle();
});
if($("#mytable tr:first").find("th:visible").length > 0){
    $("#mytable").removeClass("noborder");
}
else{
    $("#mytable").addClass("noborder");
}

}）; $（“＃selector”）。click（function（）{ $（ “＃主”）切换（）。 $（ “P”）切换（）。 }）;

}）; //在这里添加

Answer 2

您的脚本需要位于dom ready handler

jQuery(function () {
    $("input[type='checkbox']").change(function () {
        var val = $(this).val();
        $("#mytable tr:first").find("th:eq(" + val + ")").toggle();
        $("#mytable tr").each(function () {
            $(this).find("td:eq(" + val + ")").toggle();
        });
        if ($("#mytable tr:first").find("th:visible").length > 0) {
            $("#mytable").removeClass("noborder");
        } else {
            $("#mytable").addClass("noborder");
        }
    });
    $("#selector").click(function () {
        $("#main").toggle();
        $("p").toggle();
    });
})

默认情况下（左侧面板的“框架和扩展”部分中的第二个下拉列表）小提琴在window.onload处理程序中添加脚本，如

window.onload = function(){
    //your code
}

下拉复选框适用于小提琴，但不能保存为.html

2 个答案: