Question

我有以下代码在单击时隐藏元素：

<!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","#pageone",function(){   

$("p").on("taphold",function(){
        $(this).hide();   
});                        

}); 

</script> 
</head>

<div data-role="page" id="pageone">   <div data-role="header">
    <h1>The taphold Event</h1>   </div>

  <div data-role="main" class="ui-content">
    <p>If you tap and hold me for one second, I will disappear.</p>
    <p>Tap and hold me!</p>
    <p>Tap and hold me too!</p>   </div>

  <div data-role="footer">
    <h1>Footer Text</h1>   </div> </div> 

</body> </html>

我想要做的是将<p>更改为<div>元素，然后点击不同的div来隐藏它们：

<div id='d1'>If you tap and hold me for one second, I will disappear.</div>
<div id='p4'>Tap and hold me!</div>
<div id='g7'>Tap and hold me too!</div>

Answer 1

我实际上并不理解。您要点击div而不是p

吗？

然后只需将jquery中的p更改为div

<div id='d1' class="clickme">If you tap and hold me for one second, I will disappear.</div>
<div id='p4' class="clickme">Tap and hold me!</div>
<div id='g7' class="clickme">Tap and hold me too!</div>
<script> 
$(document).on("pagecreate","#pageone",function(){   

$(".clickme").on("taphold",function(){

  var id  = $(this).attr('id');
  $("#"+id).hide();   
});                        

}); 

</script>

Answer 2

感谢Ali Rasheed的一些提示，

代码中的更改如下：

<div id='d1'>If you tap and hold me for one second, I will disappear.</div>
<div id='p4'>Tap and hold me!</div>
<div id='g7'>Tap and hold me too!</div>

$(document).on("pagecreate","#pageone",function(){   

$("p").on("taphold",function(){
        $(this).hide();   
});

为：

<div id='d1' class="clickme">If you tap and hold me for one second, I will disappear.</div>
<div id='p4' class="clickme">Tap and hold me!</div>
<div id='g7' class="clickme">Tap and hold me too!</div>

$(document).on("pagecreate","#pageone",function(){   

$(".clickme").on("taphold",function(){

  var id  = $(this).attr('id');
  $("#"+id).hide();   
});

最重要的是，如果没有将以下内容添加到您的代码中，这将无效：

<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script src="jquery.mobile-1.4.5.min.js"></script>

你需要jquery.mobile，否则点击保持根本不起作用。

希望有所帮助！

单击并按住选定的div以隐藏？

2 个答案: