HTML 上的滑动事件

Question

我想做一个滑动事件，在第 1 页上它可以滑动到第 2 页，但是从第 2 页开始它不起作用，这里有什么问题吗？它只在第 1 页有效，我该怎么办？（页面主要是代码，我需要更多字符）我正在尝试创建一个滑动事件，在第 1 页上它可以滑动到第 2 页，但是从第 2 页开始它不起作用，这里有什么问题吗？它只在第 1 页有效，我该怎么办？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
  $("p").on("swiperight",function(){
    $('#page1').fadeOut();
    $('#page2').fadeIn();
    $('#page3').fadeOut();
  });                       
});
$(document).on("pagecreate","#page2",function(){
  $("p").on("swiperight",function(){
    $('#page1').fadeOut();
    $('#page2').fadeOut();
    $('#page3').fadeIn();
  });                       
});
$(document).on("pagecreate","#page3",function(){
  $("p").on("swiperight",function(){
    $('#page1').fadeOut();
    $('#page2').fadeOut();
    $('#page3').fadeIn();
  });                       
});
</script>
</head>
<body>

<div data-role="page" id="page1">
  <div data-role="main" class="ui-content">
    <p style="border:1px solid black;margin:5px;">PAGE 1</p>  
  </div>
</div> 
<div data-role="page" id="page2">
  <div data-role="main" class="ui-content">
    <p style="border:1px solid black;margin:5px;">PAGE 2</p>  
  </div>
</div> 
<div data-role="page" id="page3">
  <div data-role="main" class="ui-content">
    <p style="border:1px solid black;margin:5px;">PAGE 3</p>  
  </div>
</div> 

</body>
</html>

Answer 1

$(document).on("pagecreate","#page1",function(){
    console.log("page1");
  $("#p1").on("swiperight",function(){
      console.log("page 1's p");
    //$('#page1').fadeOut();
    $('#page1').fadeOut();
    $('#page2').fadeIn();
    $('#page3').fadeOut();
  });                       
});

  $("#p2").on("swiperight",function(){
      console.log("page 2's p");
    $('#page1').fadeOut();
    $('#page2').fadeOut();
    $('#page3').fadeIn();
  });                       


  $("#p3").on("swiperight",function(){
      console.log("page 3's p");
    $('#page1').fadeOut;
    $('#page2').fadeOut;
    $('#page3').fadeIn;
  });

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="page1">
  <div data-role="main" class="ui-content">
    <p id="p1" style="border:1px solid black;margin:5px;">PAGE 1</p>  
  </div>
</div> 
<div data-role="page" id="page2">
  <div data-role="main" class="ui-content">
    <p id="p2" style="border:1px solid black;margin:5px;">PAGE 2</p>  
  </div>
</div> 
<div data-role="page" id="page3">
  <div data-role="main" class="ui-content">
    <p id="p3" style="border:1px solid black;margin:5px;">PAGE 3</p>  
  </div>
</div> 

</body>
</html>

看到我已经使用 console.log 来解决错误。您已经使用了所有不会调用的文档事件，只使用一个，并且您已经使用了所有也不起作用的 p 事件，而是对每个 p 使用 id。希望你满意。

HTML 上的滑动事件

Swipe Event on HTML

javascript

html

css

jquery-mobile