Javascript JQuery将与Fiddler一起工作，但不能在我的服务器上工作_Javascript_Jquery_Fiddler

Javascript JQuery将与Fiddler一起工作，但不能在我的服务器上工作

javascript jquery

Javascript JQuery将与Fiddler一起工作，但不能在我的服务器上工作,javascript,jquery,fiddler,Javascript,Jquery,Fiddler,Fiddler链接：我的代码： <html> <head> <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript"> function dynamicSearch() { var val = $('#search').val(); if (val == '') va

Fiddler链接：

我的代码：

<html>

<head>
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
function dynamicSearch() {
    var val = $('#search').val();
    if (val == '') val = '.';
    var srch = new RegExp(val, "gi");

    $('.active').each(function(i, el) {
        if ($(this).text().match(srch)) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
}

$(':checkbox').bind('change', function() {
    var div = this.value.replace('value', '#div');

    if (this.checked) {
        $(div).addClass('active');
        $(div).show();
    } else {
        $(div).removeClass('active');
        $(div).hide();
    }
});

$('#search').bind('keyup', dynamicSearch);
</script>
</head>

<body>

<form>
    <label for="search">Search:</label>
    <input type="text" name="search" id="search"/>

    <input type="checkbox" name="modtype" value="value1" />value1
    <input type="checkbox" name="modtype" value="value2" />value2
    <input type="checkbox" name="modtype" value="value3" />value3
    <input type="checkbox" name="modtype" value="value4" />value4
    <input type="checkbox" name="modtype" value="value5" />value5
    <div class="row" id="div1" style="display:none">Show Div 1</div>
    <div class="row" id="div2" style="display:none">Show Div 2</div>
    <div class="row" id="div3" style="display:none">Show Div 3</div>
    <div class="row" id="div4" style="display:none">Show Div 4</div>
    <div class="row" id="div5" style="display:none">Show Div 5</div>
</form>
</body>

</html>


函数dynamicSearch（）{
var val=$（“#搜索”）.val（）；
如果（val=''）val=''；
var srch=新的RegExp（val，“gi”）；
$（'.active'）。每个（函数（i，el）{
if（$（this）.text（）.match（srch））{
$（this.show（）；
}否则{
$（this.hide（）；
}
});
}
$（':checkbox'）.bind（'change'，function（）{
var div=this.value.replace（'value'，'#div'）；
如果（选中此项）{
$（div.addClass（'active'）；
$（div.show（）；
}否则{
$（div.removeClass（'active'）；
$（div.hide（）；
}
});
$（'search'）.bind（'keyup'，dynamicSearch）；
搜索：
价值1
价值2
价值3
价值4
价值5
节目组1
节目组2
节目组3
节目组4
节目组5

正如您所看到的，在fiddler中，当您单击复选框时，它会显示一个特定的div。在my home server上，不会发生任何事情。有人知道为什么会这样吗？非常感谢。

Jsfiddler，如果您选择jQuery作为库，请将js代码包装在

$（document）.ready（）

中。这就是为什么它在那里工作，而不是在您的服务器上

在代码中更新以下内容

$(document).ready(function() {  //This
$(':checkbox').bind('change', function() {
    var div = this.value.replace('value', '#div');

    if (this.checked) {
        $(div).addClass('active');
        $(div).show();
    } else {
        $(div).removeClass('active');
        $(div).hide();
    }
});

$('#search').bind('keyup', dynamicSearch);
}); //And This

更改您的代码：

$（函数（）{ $（':checkbox'）.bind（'change'，function（）{ var div=this.value.replace（'value'，'#div'）

}))

$（'search'）.bind（'keyup'，dynamicSearch）； }

if (this.checked) {
    $(div).addClass('active');
    $(div).show();
} else {
    $(div).removeClass('active');
    $(div).hide();
}