当我将所有组件放在一起时，JQuery隐藏/显示功能停止工作

时间：2013-07-02 02:05:43

标签： jquery html-lists

我的项目与彩色键控视频有关。我正在使用UL在屏幕之间进行导航，我会对按键进行微调，并隐藏/显示div，我正在使用滑块来更改键入的颜色数量。
所有这些都是分开的。但是当我试图让他们在同一页面上完成所有工作时，隐藏/显示停止工作。我已经尝试将它拆开并一次将它重新组合在一起，但我总是陷入困境。代码如下。

    <!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="videoSetup.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="FGSlider/css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />
    <link rel="Stylesheet" href="FGSlider/css/ui.slider.extras.css" type="text/css" />
    <style type="text/css">
        /*body {font-size: 62.5%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; }*/
        fieldset { border:0; margin: 6em; height: 12em;}    
        label {font-weight: normal; float: left; margin-right: .5em; font-size: 1.1em;}
        select {margin-right: 1em; float: left;}
        .ui-slider {
    clear: both;
    top: 5em;
}

.wrap-slider {
    padding: 50px;
    font-family: Georgia, serif;
    display: none;
}

</style>

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>


<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
  <header id="top" class="fluid"> 

    <!--  <div id="container">
    <video autoplay id="videoElement">

    </video>
</div>--> 
    <!--from Jeff Burtoft-->
    <div class="row">
      <!--<div class="span5">-->
        <video id="videoElement" controls> 

        </video>
        <canvas id="hiddenCanvas" width="640" height="386"></canvas>
    <!-- </div>
     <div class="span5">-->
        <canvas id="displayCanvas" width="640" height="386"></canvas>
     <!--</div>-->
    </div>
  </header>
</div>
<script src="vidCamAccess.js"></script> 
<script src="eyedropper.js"></script> 
<script type="text/javascript" src="FGSlider/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="FGSlider/js/jquery-ui-1.7.1.custom.min.js"></script>
    <script type="text/javascript" src="FGSlider/js/selectToUISlider.jQuery.js"></script>

     <!--jQuery UI theme switcher -->
    <script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
    <script type="text/javascript"> 

    $(function(){ $('<div style="position: absolute; right: 20px; margin-top: -40px" />').appendTo('body').themeswitcher({onSelect: function(){ setTimeout(fixToolTipColor, 800); }}); });
    </script>

<script type="text/javascript">
var videoElement = document.getElementById("videoElement");
var hiddenCanvas = document.getElementById("hiddenCanvas");
var displayCanvas = document.getElementById("displayCanvas");
var hiddenContext = hiddenCanvas.getContext ("2d");
var displayContext = displayCanvas.getContext ("2d");

videoElement.addEventListener('play', function(){runAnalysis();});

var runAnalysis = function(){
     if(videoElement.paused || videoElement.ended){
      return
}
    frameConversion();
    if(window.requestAnimationFrame){
    requestAnimationFrame(runAnalysis);
    }
    else{
    setTimeout(runAnalysis,0);
    }
     };

    var frameConversion = function(){

    hiddenContext.drawImage(videoElement,0,0,videoElement.videoWidth, videoElement.videoHeight);

    var frame = hiddenContext.getImageData(0,0,videoElement.videoWidth, videoElement.videoHeight);

    var length = frame.data.length;
    for (var i =0; i <length; i++){
        var r = frame.data [i*4+ 0];
    var g = frame.data [i*4 + 1];
    var b = frame.data [i*4 + 2];
    var p = window.$vars.rgbvalue;
    //if(p > 0)  {alert ("rgbvalue:" + p [0] + "," + p[1] + "," + p[2])};

   /* if(g > 110 && g < 200 && r < 190 && r > 100 && b < 200 && b > 110){  
    frame.data[i*4+ 3] = 0; */

    if(g > p[0]-15 && g < p[0]+15 
    && r > p[1]-15 && r < p[1]+15 
    && b > p[2]-15 && b < p[2]+15){
    frame.data[i*4+ 3] = 0;
    } 
        }
    displayContext.putImageData(frame, 0, 0);
    return
    };

    </script> 

<!--end jeff's code-->

<div class="wrap-slider">
<p> Adjust the red, green and blue components separately to adjust the key.</p>
<p>RED</p>

    <script type="text/javascript">
        $(function(){
            //demo 1
            var abc = $('select#speed').selectToUISlider().next();

            fixToolTipColor();
        });
        //purely for theme-switching demo... ignore this unless you're using a theme switcher
        //quick function for tooltip color match
        function fixToolTipColor(){
            //grab the bg color from the tooltip content - set top border of pointer to same
            $('.ui-tooltip-pointer-down-inner').each(function(){
                var bWidth = $('.ui-tooltip-pointer-down-inner').css('borderTopWidth');
                var bColor = $(this).parents('.ui-slider-tooltip').css('backgroundColor')
                $(this).css('border-top', bWidth+' solid '+bColor);
            }); 
        }
    </script>


    <form action="#">
        <!-- demo 1 -->
        <fieldset>
            <label for="speed">Add How many colors to key?</label>
            <select name="speed" id="speed">
            <option value="0" selected="selected" >0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3" >3</option>
                <option value="4">4</option>
                <option value="5">5</option>
               <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
            </select>
        </fieldset>


    </form>

</div>
<p class="instructions fluid">Find a solid colored wall and stand facing away from it about 2 ft. away. The lighting on the wall needs to be as even as possible. Blue or green works best, but it must be a different color than your clothes.    Select your FRONT FACING camera if you're doing this by yourself. Or find a friend to help.</p>
<nav id="menuSystem" class="fluid">
  <ul id="menus" class="fluid fluidList">
    <li class="fluid menuItem zeroMargin_tablet zeroMargin_desktop">Select Key Color</li>
    <li class="fluid menuItem" id="adjustKey">Adjust Key</li>
    <li class="fluid menuItem">Toggle View</li>
    <li class="fluid menuItem">Home</li>
  </ul>
</nav>
</header>
</div>
</body>
<script>

$(function () {
    $(document).click(function () {
        $('.wrap-slider').hide();
    });
    $('#adjustKey').click(function (event) {
        event.stopPropagation();
        $('.wrap-slider').toggle();
    });
    $('.wrap-slider').click(function (event) {
        event.stopPropagation();
    });
});

$(document).ready(function() {
   $('.wrap-slider').hide();
});
</script>
</html>

1 个答案:

答案 0 :(得分：1)

在代码顶部附近，您正在加载最新的jQuery：

<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>

再往下，作为FGSlider安装的一部分，您正在加载jQuery 1.3.2 

<script type="text/javascript" src="FGSlider/js/jquery-1.3.2.min.js"></script>

这些可能会相互干扰。至少1.3.2版本可能优先，并且您将失去许多可能影响以后代码的功能。

您正在加载许多第三方库。你确定这些不会相互干扰吗？找出每个版本的lateste版本 - 希望以后版本比早期版本更清晰。

然后在底部，您似乎在运行$(document).ready()之前安装了一组点击处理程序。脚本可能是在DOM准备好之前尝试安装点击处理程序

将结尾脚本更改为：

<script>

$(document).ready(function() {
 $('.wrap-slider').hide();


// wrap this inside your $(document).ready() code.
$(function () {
  $(document).click(function () {
    $('.wrap-slider').hide();
  });
  $('#adjustKey').click(function (event) {
    event.stopPropagation();
    $('.wrap-slider').toggle();
  });
  $('.wrap-slider').click(function (event) {
    event.stopPropagation();
  });
});

});
</script>

我不能保证这一切都是错的，但这是一个开始。

相关问题
最新问题