JS脚本不能正常工作

Question

JS代码：

function showCaption() { 
    var captionVis = $('.grey-box-caption-text').css('display');  
    if(captionVis = "none") { 
     $('.grey-box-caption-text').width(0); 
     $(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);} 
    } else { 
     $(this).find('.grey-box-caption-text').animate({'width': '0'},750, 
                function(){$(this).hide();}); 
    } 
}; 

$('.caption-container').click(function() { 
    showCaption(); 
    return false; 
    } 
); 

HTML代码：

<div class="one-half column home-three-img"> 
    <div class="caption-container"> 
     <div class="grey-box-caption"> 
     </div> 
     <div class="grey-box-caption-text">This is a caption test - Hopefully this works 
     </div> 
    </div> 
    <img src="images/3.jpg"> 
</div> 

这样可不行，我一个JS小白。请帮忙。

我试图让标题部分从左向右滑出。当我点击父容器时，什么也没有发生。当我再次点击时，我期待标题能够拍摄出来并隐藏起来。

我有Jquery正确加载，并有一个document.ready函数工作。

链接到WIP http://clients.pivotdesign.com/dev/annual_report_2014/index.html

Answer 1

的一个大问题是，this值不会在你“showCaption”功能进行设置。添加return false;该函数的末尾：

function showCaption(){ 
    var captionVis = $('.grey-box-caption-text').css('display');  
    if (captionVis == "none") { 
     $('.grey-box-caption-text').width(0); 
     $(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750); 
    } 
    else { 
     $(this).find('.grey-box-caption-text').animate({'width': '0'},750, function(){ 
      $(this).hide(); 
     }); 
    } 
}; 

，然后更改处理程序分配：

$('.caption-container').click(showCaption); 

另外请注意，您在if声明试验是不正确的：使用==或===比较。

Answer 2

我从Pointy修改了一下CodePen，它应该用较少的代码做同样的事情。

为什么灰盒子在SO演示中增加了这里的高度，我不知道。在this CodePen它没有使用这个“bug”。

function showCaption() { 
 
    var $graybox = $('.grey-box-caption-text'); 
 

 
    $graybox.animate({ 
 
    width: 'toggle', 
 
    opacity: 'toggle' 
 
    }, 'slow'); 
 
}; 
 

 
$(function(){ 
 
\t $("#wrapper").on("click", showCaption); 
 
});

.grey-box-caption { 
 
    min-height: 3em; 
 
    min-width: 20px; 
 
    background-color: #bbb; 
 
    display: inline-block; 
 
} 
 
.grey-box-caption-text { 
 
    display: none; 
 
    padding: 1em; 
 
    font-family: sans-serif; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class=grey-box-caption> 
 
    <div class=grey-box-caption-text> 
 
     Hello World this is some text. 
 
    </div> 
 
    </div> 
 
</div>