javascript - 代码仅在警报时才能正常工作。评论提醒其给予
问题描述
需要以下代码的帮助。此代码应该在没有任何警报的情况下工作。但它的故障。当取消注释时，它会按预期工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.gallery {
position: relative;
background: rgba(15, 202, 152, 0.2) !important;
border: 2px solid rgba(15, 202, 152, 0.3) !important;
padding: .375rem .75rem;
width: 100%;
min-height: 190px;
padding: 10px;
}
.gallery .gallery-item {
position: relative;
min-height: inherit;
text-align: center;
}
.gallery .gallery-item label {
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #0fca98 !important;
vertical-align: super;
}
.gallery .gallery-item .upload-container {
position: relative;
text-align: center;
min-height: inherit;
width: 100%;
}
.gallery .gallery-item .upload-container h5.hint {
font-size: 19px;
line-height: 19px;
text-align: center;
height: 19px;
width: 100px;
}
.gallery .gallery-item .upload-container h5.hint {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.gallery .gallery-item .upload-container.uploaded h5.hint {
display: none;
}
.gallery .gallery-item .upload {
position: relative;
min-height: inherit;
width: 100%;
background: rgba(15, 202, 152, 0.3) !important;
}
.gallery .gallery-item .upload img {
width: 95%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.gallery .gallery-item .form-control {
height: 35px;
font-size: 14px;
padding: .5rem;
}
</style>
</head>
<body class="blue-skin">
<div id="main-wrapper">
<section class="gray-simple pt-3">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="submit-page">
<div class="form-submit">
<div class="submit-section">
<div class="row">
<div class="form-group col-md-3">
<label>Rooms</label>
<div class="clear"></div>
<select class="form-control" name="bedrooms" id="rooms">
<option value="">Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
</div>
</div>
<!-- Gallery -->
<div class="form-submit">
<h3>Gallery</h3>
<div class="submit-section">
<div class="row">
<div class="form-group col-md-12">
<label>Upload Gallery</label> <span class="pics"></span>
<div class="row gallery">
<div class="col-md-3 gallery-item" elemid="img-cphoto">
<label>Cover Photo</label>
<div class="upload-container">
<input type="file" name="image" class="d-none" accept="image/png, image/tiff, image/jpeg, image/jpg" required/>
<div class="upload">
<img src="" id="img-cphoto" class="d-none" />
</div>
<h5 class="hint"><i class="fa fa-upload text-info" aria-hidden="true"></i> Upload</h5>
</div>
<input name="title[]" class="form-control" placeholder="Photo Title e.g. Front Pic" required />
<input name="img-area[]" class="form-control" placeholder="Covered Area" required />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
(function() {
var start;
$("#rooms").on('focus', function() {
start = "";
start = this.value;
if (start === "" || start === "NaN") {
start = 0;
}
start = parseInt(start);
}).change(function() {
var num;
num = parseInt(this.value);
//alert(start);
// Alert uncomment karne per thik function kar raha hai
var label = "Room ";
var lblTxt;
var elem = "";
if (start > num) {
for (let i = start; i > num; i--) {
var rlbl = $.trim(label) + '-' + (parseInt(i));
$(".gallery-item").each(function(index) {
var relbl = $(this).attr('elemid');
console.log(index + ": " + relbl);
if (relbl === rlbl) {
$(this).remove();
}
});
}
}
if (start < num) {
for (let i = start; i < num; i++) {
lblTxt = label + (parseInt(i) + 1);
elem = '<div class="col-md-3 gallery-item" elemid="' + $.trim(label) + '-' + (parseInt(i) + 1) + '">';
elem += '<label>' + lblTxt + '</label>';
elem += '<div class="upload-container">';
elem += '<input type="file" name="image" class="d-none" accept="image/png, image/tiff, image/jpeg, image/jpg" required/>';
elem += '<div class="upload">';
elem += '<img src="" id="' + $.trim(label) + '-' + (parseInt(i) + 1) + '" class="d-none" />';
elem += '</div>';
elem += '<h5 class="hint"><i class="fa fa-upload text-info" aria-hidden="true"></i> Upload</h5>'
elem += '</div>';
elem += '<input name="title[]" class="form-control" placeholder="Photo Title e.g. Master Bedroom" required />';
elem += '<input name="img-area[]" class="form-control" placeholder="Carpet Area" required />';
elem += '</div>';
$('.gallery').append(elem);
}
}
});
})();
</script>
</body>
</html>请求开发人员成员检查此代码并帮助解决问题。我已将这段代码与大代码分开，并签入名为 error.html 的单独文件，并在几乎所有浏览器中进行了测试。错误保持不变。此处提交的代码是 error.html 文件中的完整代码。
寻找解决此问题的方法。
解决方案
我已经在如何从 jQuery 的输入字段中移除焦点的帮助下解决了这个问题？ 现在代码是：
<script type="text/javascript">
(function() {
var start;
$("#rooms").on('focus', function() {
start = "";
start = this.value;
if (start === "" || start === "NaN") {
start = 0;
}
start = parseInt(start);
}).change(function() {
var num;
num = parseInt(this.value);
//alert(start);
// Alert uncomment karne per thik function kar raha hai
var label = "Room ";
var lblTxt;
var elem = "";
if (start > num) {
for (let i = start; i > num; i--) {
var rlbl = $.trim(label) + '-' + (parseInt(i));
$(".gallery-item").each(function(index) {
var relbl = $(this).attr('elemid');
console.log(index + ": " + relbl);
if (relbl === rlbl) {
$(this).remove();
}
});
}
}
if (start < num) {
for (let i = start; i < num; i++) {
lblTxt = label + (parseInt(i) + 1);
elem = '<div class="col-md-3 gallery-item" elemid="' + $.trim(label) + '-' + (parseInt(i) + 1) + '">';
elem += '<label>' + lblTxt + '</label>';
elem += '<div class="upload-container">';
elem += '<input type="file" name="image" class="d-none" accept="image/png, image/tiff, image/jpeg, image/jpg" required/>';
elem += '<div class="upload">';
elem += '<img src="" id="' + $.trim(label) + '-' + (parseInt(i) + 1) + '" class="d-none" />';
elem += '</div>';
elem += '<h5 class="hint"><i class="fa fa-upload text-info" aria-hidden="true"></i> Upload</h5>'
elem += '</div>';
elem += '<input name="title[]" class="form-control" placeholder="Photo Title e.g. Master Bedroom" required />';
elem += '<input name="img-area[]" class="form-control" placeholder="Carpet Area" required />';
elem += '</div>';
$('.gallery').append(elem);
}
}
$("#rooms").blur();
});
})();
我要感谢 Bergi 提请我注意焦点问题。现在它按预期工作。
推荐阅读
- angular - 我正在尝试使用角管格式化日期，但它不起作用
- regex - 查找数字并替换 + 1
- java - 如何解析 JUnit 结果 xml 文件并在 java 代码中获取测试用例？
- mysql - INNER JOIN 的问题我没有得到想要的结果
- api - 如何将字符串转换为 time.Time
- html - 如何在 HTML A-Frame 中设置延迟
- apache-flink - 澄清状态后端
- git - git repo 的错误 - 致命：“松散对象文件”上的 fsync 错误：错误的文件描述符
- excel - Excel和有条件地选择变量
- python - 无法完成代码，__init__() 需要 1 到 2 个位置参数，但给出了 3 个