jquery 相关问题

当页面/浏览器失去焦点时暂停setInterval

我在客户的主页上制作了一个简单的幻灯片，使用 setInterval 来计时轮换。 为了防止浏览器在页面未聚焦时搞乱 setInterval（另一个选项卡...

使用 jquery 接收多次上传的文件时出现问题

我正在尝试使用ajax和php将多个图像发送到服务器。 HTML： 我正在尝试使用ajax和php将多个图像发送到服务器。 HTML： <div class="upload-container" id="uploadContainer"> <div class="upload-box show"> <span class="plus-sign">+</span> <input type="file" name="images[]" accept="image/*" multiple> <button class="delete-icon" type="button">×</button> </div> </div> JavaScript： 这通过创建一个方框来设置文件字段的样式，单击该方框将打开图像选择器并包含最多五个文件。工作正常 document.addEventListener('DOMContentLoaded', function() { const uploadContainer = document.getElementById('uploadContainer'); const imageUploadForm = document.getElementById('form-review'); let imageCount = 0; const maxImages = 5; function createUploadBox() { if (imageCount >= maxImages) return; const uploadBox = document.createElement('div'); uploadBox.classList.add('upload-box'); uploadBox.innerHTML = ` <span class="plus-sign">+</span> <input type="file" accept="image/*" name="images[]" multiple> <button class="delete-icon" type="button">×</button> `; uploadContainer.appendChild(uploadBox); setTimeout(() => uploadBox.classList.add('show'), 10); attachUploadEvents(uploadBox); } function attachUploadEvents(uploadBox) { const input = uploadBox.querySelector('input[type="file"]'); const deleteIcon = uploadBox.querySelector('.delete-icon'); uploadBox.addEventListener('click', () => { if (uploadBox.classList.contains('filled')) return; input.click(); }); input.addEventListener('change', (event) => { const files = Array.from(event.target.files); const validFiles = files.slice(0, maxImages - imageCount); validFiles.forEach(file => { const reader = new FileReader(); reader.onload = (e) => { const imgBox = document.createElement('div'); imgBox.classList.add('upload-box', 'show', 'filled'); imgBox.innerHTML = ` <img src="${e.target.result}" alt="Image"> <button class="delete-icon" type="button">×</button> `; uploadContainer.insertBefore(imgBox, uploadContainer.lastElementChild); attachDeleteEvent(imgBox); imageCount++; if (imageCount >= maxImages) { const emptyUploadBox = document.querySelector('.upload-box:not(.filled)'); if (emptyUploadBox) emptyUploadBox.remove(); } }; reader.readAsDataURL(file); }); input.value = ''; }); deleteIcon.addEventListener('click', (event) => { event.stopPropagation(); event.preventDefault(); uploadBox.classList.remove('show'); setTimeout(() => { uploadBox.remove(); imageCount--; ensureOneEmptyUploadBox(); }, 300); }); } window.resetUploadBoxes = function() { const filledUploadBoxes = document.querySelectorAll('.upload-box.filled'); filledUploadBoxes.forEach(box => box.remove()); imageCount = 0; ensureOneEmptyUploadBox(); } function attachDeleteEvent(uploadBox) { const deleteIcon = uploadBox.querySelector('.delete-icon'); deleteIcon.addEventListener('click', (event) => { event.stopPropagation(); event.preventDefault(); uploadBox.classList.remove('show'); setTimeout(() => { uploadBox.remove(); imageCount--; ensureOneEmptyUploadBox(); }, 300); }); } function ensureOneEmptyUploadBox() { const emptyUploadBox = document.querySelector('.upload-box:not(.filled)'); if (!emptyUploadBox && imageCount < maxImages) { createUploadBox(); } } attachUploadEvents(document.querySelector('.upload-box')); $('#button-review').on('click', function() { var formData = new FormData($('#form-review')[0]); // Loop through all file input elements $('input[type="file"]', $('#form-review')).each(function(index, input) { if (input.files.length > 0) { formData.append('image[]', input.files[0]); } }); $.ajax({ url: 'index.php?route=product/product/write&product_id={{ product_id }}', type: 'post', dataType: 'json', data: formData, cache: false, contentType: false, processData: false, beforeSend: function() { $('#button-review').button('loading'); }, complete: function() { $('#button-review').button('reset'); }, success: function(json) { $('.alert-dismissible').remove(); if (json['error']) { $('#review').after('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>'); $('html, body').animate({scrollTop: $("#review").offset().top}, 800); } if (json['success']) { resetUploadBoxes(); $('#review').after('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>'); $('html, body').animate({scrollTop: $("#review").offset().top}, 800); $('input[name=\'name\']').val(''); $('textarea[name=\'text\']').val(''); $('input[name=\'rating\']:checked').prop('checked', false); } }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); }); }); PHP： $files = []; if (!empty($this->request->files) && is_array($this->request->files)) { foreach ($this->request->files as $key) { if ($key['name'] != "") { $files[] = array( 'name' => $key['name'], 'type' => $key['type'], 'tmp_name' => $key['tmp_name'], 'error' => $key['error'], 'size' => $key['size'] ); } } } 这几乎可以正常工作，但我无法在服务器端接收图像。到达的数组是空的。我可以发送表单文本并且不会发生错误。我分析了代码，包括在人工智能的帮助下，没有发现任何问题。 您需要循环遍历每个文件输入中的所有文件，而不仅仅是附加每个文件中的第一个文件。所以更换 // Loop through all file input elements $('input[type="file"]', $('#form-review')).each(function(index, input) { if (input.files.length > 0) { formData.append('image[]', input.files[0]); } }); 与 // Loop through all file input elements $('input[type="file"]', $('#form-review')).each((index, input) => [...input.files].forEach(file => formData.append('image[]', file) ); 尽管正如CBroe评论的那样，var formData = new FormData($('#form-review')[0])应该已经将文件放入formData并且这个循环是不必要的。

Jquery UI Datepicker - 如何使用 jquery/javascript 突出显示多个日期背景颜色

我知道，Stackoverflow 中也有很多问题。但没有得到有效的答案。任何人都可以帮我解决这个问题吗？ 我想突出显示当月的多个日期。例如：2017 年 3 月 2 日，10

这是员工域，是吗？

Lorem ipsum dolor sat amet，consectetur adipiscing elit。 sed sed eros condimentum，tincidunt urna ac，iaculis velit。 Duis neque totortor，tempus a arcu pharetra，maximus faucibuserat。 Nulla facilisi。

循环数组并输出 HTML

我正在循环遍历一个数组并将结果附加到页面上的 HTML 元素中。 这是我的 JavaScript/jQuery： var numberOfFiles = email.file_id.length; for (var 文件索引 = 0; 文件索引 <

将 jQuery 从版本 3.5.1 更新到版本 3.7.1

我正在将我网站上的 jQuery 库从版本 3.5.1 更新到版本 3.7.1。我需要解决所有已删除的功能以避免出现问题。有谁知道有哪些功能

daterangepicker 仅年份和月份[重复]

我使用日期范围选择器，只想显示年份和月份并查找开始和结束月份，但它无法按预期工作。 我该如何修改它以使其按我想要的方式工作？ 我想要一个屏幕...

如何将有序列表呈现为 div 内的 HTML 内容？

您好，我正在尝试在 div 内渲染有序列表，但它以纯文本形式出现，例如“flour”而不是“1.flour”。 渲染其他 html 内容可以工作，但已排序...

分词：jqxgrid 列标题的全部分解

var CreatedTABLETGrid = 函数 (catid) { 变量列 = [ { text：'集成商/在线/业务合作伙伴'，datafield：'StockRange'，columntype：'textbox'，filtercondition：'contains'，w...

隐藏元素上的选项卡导航 – mmenu.js v5.7.8

使用mmenu.js v5.7.8（以前称为jQuery mmenu）我有以下配置： $('#menu').mmenu({ 扩展：[ 'effect-slide-menu', 'shadow-page', 'shadow-panels', 'pagedim-black' ...

页面刷新时弹出表单不再出现

我有一个弹出表单，当页面首次在浏览器中加载时会加载。用户需要填写表单，单击“提交”，然后表单关闭。此时如果刷新页面，会弹出...

ChartJS：用不同的颜色填充高于最大值、介于最大值/最小值之间以及低于最小值限制的曲线数据集

Rails 5、ChartKick 5.0.5 => ChartJS 4.4.1 我在 ChartJS 中有一个曲线图，它在 Y 轴上绘制大约 0 的值，并具有单独的正值最大阈值和负值最小阈值...

如何通过ajax post发送图片？

我正在尝试通过ajax post发送一些数据，我尝试了序列化，但我不断收到错误，文件名不存在。 表单数据 $('#send #submit').on('点击', function(e){ e.preventDefault();...

尝试上传时出现准备状态错误。怀疑可能是htaccess重写问题？

我正在尝试上传图像。我的以下代码在另一个页面上完美运行，但在这里不起作用。当我尝试时遇到此错误 {"readyState":0,"status&q...

JQuery 脚本可在鼠标移动时围绕圆的边框移动元素

我就快到了 - 想要创建一个小圆圈，在鼠标移动时围绕大圆圈的边界移动。我有以下内容，但小圆圈不在范围内...

根据 href 设计链接

我的网站上有一个我想要设置样式的第三方链接。但它没有任何我可以定位的类或 ID。它唯一拥有的是它独特的 href 值。 是否可以设置锚标记的样式...

CSS：根据其 href 来设置链接样式

我的网站上有一个我想要设置样式的第三方链接。但它没有任何我可以定位的类或 ID。它唯一拥有的是它独特的 href 值。 是否可以设置锚标记的样式...

复选框，当选中一个复选框时，取消选中具有相同类别的所有其他

我有很多复选框，每个复选框都有相同的 ID 和类。 输入本身具有“el-checkbox__original”类。 我有很多复选框，每个复选框都有相同的 ID 和类。 输入本身具有“el-checkbox__original”类。 <div id="treatment-option-ext" class="bpa-service-extra__item"> <div class="bpa-sei__header"> <div class="bpa-sei__left"> <div class="bpa-sei__left-checkbox"> <label class="el-checkbox bpa-form-label bpa-custom-checkbox--is-label bpa-front-form-control--checkbox"> <span class="el-checkbox__input"> <span class="el-checkbox__inner"></span> <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value=""> </span> </label> </div> <div class="bpa-sei__left-body"> <div class="bpa-se--heading">1.1ml</div> <div class="bpa-se--options"> <div class="bpa-se-o__item">£0.00</div> </div> </div> </div> <div class="bpa-sei__right"> </div> </div> </div> 勾选后，span标签和label标签都会添加class is-checked <div id="treatment-option-ext" class="bpa-service-extra__item"> <div class="bpa-sei__header"> <div class="bpa-sei__left"> <div class="bpa-sei__left-checkbox"> <label class="el-checkbox bpa-form-label bpa-custom-checkbox--is-label bpa-front-form-control--checkbox is-checked"> <span class="el-checkbox__input is-checked"> <span class="el-checkbox__inner"></span> <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value=""> </span> </label> </div> <div class="bpa-sei__left-body"> <div class="bpa-se--heading">1.1ml</div> <div class="bpa-se--options"> <div class="bpa-se-o__item">£0.00</div> </div> </div> </div> <div class="bpa-sei__right"> </div> </div> </div> 我怎样才能做到，如果单击一个复选框（el-checkbox__original），则任何其他复选框都不会被选中，最终只能选中一个复选框。 我尝试使用 JQuery，但显然，当单击其中一个复选框时，它不会从任何其他复选框中删除选中状态 jQuery.noConflict(); setTimeout(function(){ jQuery(document).ready(function($) { console.log("page loaded") $(".bpa-front-si-card").on('click', function(){ console.log("service clicked") }); <!-- after clicking bpa-front-si-card - line above, checkboxes with class el-checkbox__original appear and should listen for checkboxes to be clicked --> $(".el-checkbox__original").on('click', function(){ $('input.el-checkbox__original').not(this).prop('checked', false).closest("label").removeClass('is-checked').closest("span").removeClass('is-checked'); }) })}, 6000); 使用 on-change 事件作为复选框，并且不要使代码过于复杂。 这就是您简单地删除该事件中的类的方法 $(".el-checkbox__original").on('change', function(){ console.log('here', this), $(this).closest('span').removeClass('is-checked') .closest('label').removeClass('is-checked'); }) ; 经过尝试和测试@https://jsfiddle.net/cqgfesdb/1/ 还设置了 6 秒的超时，然后调用 document.ready 有点奇怪。

如何将剪贴板中的富文本粘贴到 HTML 文本区域元素？

从网络浏览器复制粘贴到文本处理器时，HTML 标记会转换为富文本，文本处理器会尝试将标记转换为其自己的格式。这证明

语义 UI：禁用与模态关联的调光器

我有一个接受一些用户输入的模式。如果用户得到正确的答案，他/她应该能够看到调光器后面的动画。我努力了 $('.basic.modal') .modal('设置',{