Question

我有一个函数，将x-px的空白边距添加到作为“ div”框的“ Karusell”中。我还有一个函数，每次我们使用第一个函数时，都会在nextClicked上添加“ 1”。当nextClicked为2时，单击第一个函数时不应添加任何边距。在JSFiddle中，这可以很好地工作，但是在我的HTML文档中却不起作用，我也不知道为什么。

body {
    background-color: #e0e0e0;
    position: relative;
}

#bokse1 {
    width: 100px;
    height: 100px;
    background-color: blue;
}

#bokse2 {
    width: 100px;
    height: 100px;
    background-color: red;
}

#Karusell {
    width: 1040px;
    height: 300px;
    background-color: indigo;
    display: absolute;
}

<head>
    <link rel="stylesheet" href="css.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>


<body>

    <div id="bokse1"></div>
    <div id="bokse2"></div>

    <div id="Karusell"></div>

    <script>
        currentNextClicked = 0;

        nextClicked = 0;

        $(document).ready(function () {

            $("#bokse1").click(function () {
                if (nextClicked != 2)
                    $("#Karusell").animate({
                        marginLeft: ["+=100px", "linear"],
                    }, 400, function () {});
            });

            $('#bokse1').live('click', function () {
                if (nextClicked != 2) {
                    currentNextClicked = nextClicked;
                    nextClicked = currentNextClicked + 1;
                    console.log(nextClicked)
                }
            });

        });
    </script>

</body>

这是JSFiddle：http://jsfiddle.net/vbLjcpx1/11/

正如我们在JSFiddle链接中看到的那样，第二次使用该函数时没有添加空白，这也应该在我的HTML文档中发生。

Answer 1

您正在使用live()函数已过时的较新版本的jquery，请改用on()函数

<script>

currentNextClicked = 0;

nextClicked = 0;

$(document).ready(function() {

  $("#bokse1").click(function() {
  if (nextClicked != 2)
$("#Karusell").animate({
  marginLeft: ["+=100px", "linear"],
}, 400, function() {
});
});

  $('#bokse1').on('click', function(){
      if (nextClicked != 2) {
      currentNextClicked = nextClicked;
      nextClicked = currentNextClicked + 1;
      console.log(nextClicked)
  }});

});

  </script>

Answer 2

currentNextClicked = 0;

nextClicked = 0;

$(document).ready(function() {

  $("#bokse1").click(function() {
  if (nextClicked != 2)
$("#Karusell").animate({
  marginLeft: ["+=100px", "linear"],
}, 400, function() {
});
});

  $('#bokse1').on('click', function(){
      if (nextClicked != 2) {
      currentNextClicked = nextClicked;
      nextClicked = currentNextClicked + 1;
      console.log(nextClicked)
  }});

});

.nextButtonFalse{display:none;}
.prevButtonFalse{display:none;}

#bokse1 {width:20px;height:20px;background-color:blue;}
#bokse2 {width:20px;height:20px;background-color:red;}
#Karusell{width:30px;height:30px;background-color:indigo;display:absolute;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="bokse1"></div>
<div id="bokse2"></div>

<div id="Karusell">

jQuery - how to use the “on()” method instead of “live()”?

.live已过时，因为jQuery 1.9使用.on代替1.8以后的版本

jQuery函数可在JSFiddle上使用，但不能在我的html文档中使用

2 个答案: