我是jQuery和html的新手（之前只做过反应）。
现在我想触摸触摸设备上的复选框时触发叠加。
实际上我已经完成了这个功能（完美地工作），但经过一些操作（比如git commit或其他我不知道的东西），该功能突然根本无法工作（覆盖层无法显示）。
我整晚都在尝试调试。我认为这一定是我犯的一些小错误（如错误的结束标签或类似的东西），但我无法找到。
这是我的代码：
$(function(){
$('div.touch-checkbox').on('click touchstart', function(e) {
// e.stopPropagation();
if (console && console.log) console.log('hi');
$('.paulund_modal').paulund_modal_box();
});
});
//the modal
(function($){
$.fn.paulund_modal_box = function(prop){
var options = $.extend({
height : "250",
width : "300",
title:"Please select your time",
description: "",
top : ($(window).outerHeight() / 4) + 'px',
left : (($(window).width() - 300) / 2) + 'px',
},prop);
if (console && console.log) console.log($(window).width());
return this.click(function(){
//this line of console log didn't run
if (console && console.log) console.log('hi11');
add_block_page();
add_popup_box();
add_styles();
$('.paulund_modal_box').fadeIn();
});
function add_styles(){
$('.paulund_modal_box').css({
'position':'absolute',
'left':options.left,
'top':options.top,
'display':'none',
'height': options.height + 'px',
'width': options.width + 'px',
'border':'1px solid #fff',
'box-shadow': '0px 2px 7px #292929',
'-moz-box-shadow': '0px 2px 7px #292929',
'-webkit-box-shadow': '0px 2px 7px #292929',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px',
'background': '#f2f2f2',
'z-index':'50',
});
$('.paulund_modal_close').css({
'position':'relative',
'top':'0px',
'left':'20px',
'float':'right',
'font-size':'20px',
'display':'block',
'height':'50px',
'width':'50px',
});
$('.paulund_modal_close').html(
'<i class="fa fa-times"></i>'
);
/*Block page overlay*/
var pageHeight = $(document).height();
var pageWidth = $(window).width();
$('.paulund_block_page').css({
'position':'absolute',
'top':'0',
'left':'0',
'background-color':'rgba(0,0,0,0.6)',
'height':pageHeight,
'width':pageWidth,
'z-index':'10'
});
$('.paulund_inner_modal_box').css({
'background-color':'#fff',
'height':(options.height - 50) + 'px',
'width':(options.width - 50) + 'px',
'padding':'10px',
'margin':'15px',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px'
});
}
function add_block_page(){
var block_page = $('<div class="paulund_block_page"></div>');
$(block_page).appendTo('body');
}
function add_popup_box(){
var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h3>' + options.title + '</h3><p>' + options.description + '</p> <div><p>hello</p></div></div></div>');
$(pop_up).appendTo('.paulund_block_page');
$('.paulund_modal_close').click(function(){
$(this).parent().fadeOut().remove();
$('.paulund_block_page').fadeOut().remove();
});
}
return this;
};
})(jQuery);.touch-checkbox{
z-index:3;
height:11px;
cursor: pointer;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="description" content="First time using jQuery">
<meta name="viewport" content="width=device-width, initial-scale=1.0001">
<link href="style/screen.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></scrip\
t>
<script type="text/javascript" src="js/checkbox-touch-device.js"></script>
</head>
<body>
<div id="portrait">
<div class="paulund_modal"></div>
<p>hello</p>
<div class="touch-checkbox">
<input id="sun12am" type="checkbox"> <label for="sun12am"></label>
</div>
</div>
</body>
</html>
正如您所看到的，我希望在单击触发器上为类.touch-checkbox提供一个触发器（我在本地开发环境中仅使用touchstart进行媒体查询，请单击此处查看代码片段。）。< / p>
直到JS文件中的if (console && console.log) console.log($(window).width());有用的代码，但无法返回叠加层。
我猜JS文件中的return this.click(function()有问题。
我确信这段代码在开始时确实有用，我只是想知道为什么它可以在没有修改的情况下完全工作（也许我错误地修改了它但我没有认识到）... ....
有人能帮助我吗？非常感谢你。
答案 0 :(得分：0)
我认为不需要回报。删除return语句并运行 $('.paulund_modal_box').fadeIn()
return语句停止执行函数并返回a 该函数的值。
$(function() {
$('div.touch-checkbox').on('click touchstart', function(e) {
// e.stopPropagation();
if (console && console.log) console.log('hi');
$('.paulund_modal').paulund_modal_box();
});
});
//the modal
(function($) {
$.fn.paulund_modal_box = function(prop) {
var options = $.extend({
height: "250",
width: "300",
title: "Please select your time",
description: "",
top: ($(window).outerHeight() / 4) + 'px',
left: (($(window).width() - 300) / 2) + 'px',
}, prop);
if (console && console.log)
console.log($(window).width());
//this line of console log didn't run
if (console && console.log) console.log('hi11');
add_block_page();
add_popup_box();
add_styles();
$('.paulund_modal_box').fadeIn();
function add_styles() {
$('.paulund_modal_box').css({
'position': 'absolute',
'left': options.left,
'top': options.top,
'display': 'none',
'height': options.height + 'px',
'width': options.width + 'px',
'border': '1px solid #fff',
'box-shadow': '0px 2px 7px #292929',
'-moz-box-shadow': '0px 2px 7px #292929',
'-webkit-box-shadow': '0px 2px 7px #292929',
'border-radius': '10px',
'-moz-border-radius': '10px',
'-webkit-border-radius': '10px',
'background': '#f2f2f2',
'z-index': '50',
});
$('.paulund_modal_close').css({
'position': 'relative',
'top': '0px',
'left': '20px',
'float': 'right',
'font-size': '20px',
'display': 'block',
'height': '50px',
'width': '50px',
});
$('.paulund_modal_close').html(
'<i class="fa fa-times"></i>'
);
/*Block page overlay*/
var pageHeight = $(document).height();
var pageWidth = $(window).width();
$('.paulund_block_page').css({
'position': 'absolute',
'top': '0',
'left': '0',
'background-color': 'rgba(0,0,0,0.6)',
'height': pageHeight,
'width': pageWidth,
'z-index': '10'
});
$('.paulund_inner_modal_box').css({
'background-color': '#fff',
'height': (options.height - 50) + 'px',
'width': (options.width - 50) + 'px',
'padding': '10px',
'margin': '15px',
'border-radius': '10px',
'-moz-border-radius': '10px',
'-webkit-border-radius': '10px'
});
}
function add_block_page() {
var block_page = $('<div class="paulund_block_page"></div>');
$(block_page).appendTo('body');
}
function add_popup_box() {
var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h3>' + options.title + '</h3><p>' + options.description + '</p> <div><p>hello</p></div></div></div>');
$(pop_up).appendTo('.paulund_block_page');
$('.paulund_modal_close').click(function() {
$(this).parent().fadeOut().remove();
$('.paulund_block_page').fadeOut().remove();
});
}
return this;
};
})(jQuery);.touch-checkbox {
z-index: 3;
height: 11px;
cursor: pointer;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<div id="portrait">
<div class="paulund_modal"></div>
<p>hello</p>
<div class="touch-checkbox">
<input id="sun12am" type="checkbox"> <label for="sun12am"></label>
</div>
</div>