Выпадающий флажок Работает с скрипкой, но не при сохранении в формате .html.

Question

Выпадающий флажок Работает с скрипкой, но не при сохранении в формате .html.

0

Этот 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>

Может кто-нибудь сказать мне, почему? Это будет очень полезно.

Arjun 30 нояб. 2013, в 07:10

Источник

0

Возможно, вы не импортируете библиотеку JQuery
Zword 30 нояб. 2013, в 05:21
0

У вас есть папка js в той же директории, что и файл HTML? Вы также должны сообщить нам, о чем сообщает консоль ошибок.
Tieson T. 30 нояб. 2013, в 05:23
0

поместите скрипт в документ .ready ().
Sindhu 30 нояб. 2013, в 05:24

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

html-select

2 ответа

0

Ваш скрипт должен быть в обработчике dom ready

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
}

Arun P Johny 30 нояб. 2013, в 03:38

Ещё вопросы

Возможно, вы не импортируете библиотеку JQuery
У вас есть папка js в той же директории, что и файл HTML? Вы также должны сообщить нам, о чем сообщает консоль ошибок.
поместите скрипт в документ .ready ().

qiu-deqing · Accepted Answer · 2013-11-30T02-40-00.000Z

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

прослушиватель для события загрузки в окне и поместите код javascript в него в 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();});

}); // добавим сюда