Question

我正在尝试使用按钮滚动div。我正在使用this解决方案来解决我的问题。但是我收到错误Uncaught TypeError: view.css is not a function。我添加了jquery插件但仍然出现此错误。

这是我的代码

<div class="bstimeslider">
<div id="rightArrow"></div>
    <div id="viewContainer">
        <div id="tslshow">
        <?php foreach($activity_data as $list):?>        
         <div class="bktibx">
          <div>
           <?php 
           if (isset( $list['coverimage']) && $list['coverimage']!=""){
            echo '<img src="'.$list["coverimage"].'" height="90" width="80" >';
          }else {
            echo '<img src="'.WEBSITE_URL.'views/site/activity_placeholder.png" height="90" width="80" >';
          } ?>
       </div>
     <div>
     <h4><a style="font-size: 20px;font-weight: bold;color:#48a4ca" href="<?php echo WEBSITE_URL ;?>site/eventDetail/<?php echo $list['_id']; ?>"><?php echo $list['title']; ?> </a></h4>
  <?php
  $ro= strlen($list['description']);
    if($ro >100){
      $small = substr($list['description'], 0, 100);
      echo  $small."...";
    } else {
      echo   strip_tags($list['description']);
    }
  ?>    
 </div>
</div>
<?php endforeach; ?>
</div>
    </div>
    <div id="leftArrow"></div>
</div>

和jquery

<script type="text/javascript">

    var view = $("#tslshow").attr('id');
    var move = "100px";
    var sliderLimit = -750

    $("#rightArrow").click(function(){
      var currentPosition = parseInt(view.css("left"));
      if (currentPosition >= sliderLimit) 
       view.stop(false,true).animate({left:"-="+move},{ duration: 400})
    });
    $("#leftArrow").click(function(){
      var currentPosition = parseInt(view.css("left"));
      if (currentPosition < 0) 
        view.stop(false,true).animate({left:"+="+move},{ duration: 400});
   });
</script>

当我点击按钮时，我收到错误Uncaught TypeError: view.css is not a function。

Answer 1

第一：如果您没有jquery文件，则需要确保包含jquery，您可以在<head>或</body>之前使用此行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

第二名：您需要在文档准备好之后将代码包装好......就像这样

$(document).ready(function(){
   // code here
});

第3名关于您的代码

var view = $("#tslshow").attr('id'); // will output tslshow string not an object and while you use id you can just use `var view = $("#tslshow");`

关于view.css("left")您可能需要在css上设置左侧元素，因此如果您决定使用view = $("#tslshow").attr('id');，则会使用$('#'+view).css('left')，如果您将使用var view = $("#tslshow");您将使用view.css('left');

Answer 2

是的，我找到了解决办法。我需要使用一些jquery插件。

<script src="<?=WEBSITE_URL?>views/theme/_layout/js/animations/animate.js"></script> <script src="<?=WEBSITE_URL?>views/theme/_layout/js/viewport/jquery.viewport.js"></script>

这就是解决问题所需的一切

Answer 3

替换此

var currentPosition = parseInt(view.css("left"));

与

var currentPosition = parseInt($(view).css("left"));

Answer 4

您可以使用以下代码

var currentPosition = parseInt($("#tslshow").css("left"));

或

var view = "#tslshow";
var currentPosition = parseInt($(view).css("left"));

或

var currentPosition = parseInt($(view).css("left"));

Answer 5

将第1行的var view = $("#tslshow").attr('id');更改为

var view = $("#tslshow");

您不需要实际ID。你只需要一个jQuery对象来执行.css函数调用。

未捕获的TypeError：view.css不是函数

5 个答案: