jquery 相关问题

在 Bootstrap 选择器上使用 jQuery 取消选择选项

我正在使用 Bootstrap 来处理一些 UI 元素：SelectPicker，它允许用户选择多个选项并将其呈现在段落标签中的屏幕上。他们还应该能够删除...

使用 TrackballControls 时重置相机位置/旋转

我有一个带有 Threejs 的 webgl 应用程序。它使用 TrackballControls 来控制相机。我有一个按钮，我想用它来重置场景，因此，相机应该进入初始状态。我

Lenis smoothscroll：在 Firefox 上元素的下拉动画后不会滚动到底部

编辑：它似乎适用于 Chrome 和 Edge。在最新的 Windows Safari 版本 (5.1.7) 上，它无法工作，因为它不支持“=>”，并且 Safari 不支持 Windows 10 更新...

我是否需要从 switch case 返回任何重要的内容，或者只是这样就足以区分不同的 PHP？

我正在尝试创建一个管理页面，下面是我的代码及其多个面板，其中单击相应的图像将导致将replaceThis div更改为其各自的php文件

自定义全选复选框仅选择当前数据表页面中的元素

我有一个简单且基本的数据表，我在其中添加了一个带有自定义 SelectAll 复选框的标题，并为我的 tbody 中存在的每一行添加了另一个复选框（我需要添加此输入，因为我要附加一些数据

如何使用 php 添加动态元标签

我从 Laravel API 获取数据，我想显示动态元标题和描述，但是当我在检查元素中设置动态数据时，它显示动态值，但未在页面源代码中更新，并且还...

WooCommerce 自定义选择字段，按所选国家/地区提供不同选项

我想在帐单地址表单中添加 billing_tax_office 字段。但我想通过国家/地区过滤选择字段值。 $fields['billing_tax_office'] = array( '类型' => '选择', ...

当子类处于活动状态时，在页面加载时打开可折叠的父类

我有一个 html 页面，其中包含带有按钮 btn-acc-tab 的手风琴部分。当用户单击按钮时，acc-tab 部分会打开，每个部分都包含可以处于活动状态的链接 tab-link。该教派...

在页面加载时将函数附加到现有的 onclick 事件

我有以下由我正在使用的应用程序预先编写的html代码，但我无权访问它，即 我有以下由我正在使用的应用程序预先编写的 html 代码，但我无权访问该代码，即 <td align="center" class="shuttleControl"> <img src="/i/mydb/icons/shuttle_reload.png" onclick="g_Shuttlep_v61.reset();" alt="Reset" title="Reset"/> <img src="/i/mydb/icons/shuttle_last.png" onclick="g_Shuttlep_v61.move_all();" alt="Move All" title="Move All"/> <img src="/i/mydb/icons/shuttle_right.png" onclick="g_Shuttlep_v61.move();" alt="Move" title="Move" /> <img src="/i/mydb/icons/shuttle_left.png" onclick="g_Shuttlep_v61.remove();" alt="Remove" title="Remove" /> <img src="/i/mydb/icons/shuttle_first.png" onclick="g_Shuttlep_v61.remove_all();" alt="Remove All" title="Remove All" /> </td> 基于上面的代码，使用jQuery，是否有可能当页面加载完成时，搜索img src“shuttle_last.png”并附加到它的onclick调用，我自己的函数get_Count(); ？ 也就是说，当我查看该特定行的页面源代码时，我会看到以下代码，即： <img src="/i/mydb/icons/shuttle_last.png" onclick="g_Shuttlep_v61.move_all();get_Count();" alt="Move All" title="Move All"/> 这可能吗？ 这行不通： $('img[src$="shuttle_last.png"]').click(function() { get_Count(); }); ？

如何修复 JavaScript 中转换数字时光标打字机跳转到结尾的问题？

以下问题在 JavaScript 中转换数字的解决方案和正确方法是什么？以及如何在 JavaScript 中转换数字，以及删除非数字字符的命令问题...

如何选择具有可见父级的类的所有元素？

这是我的，但似乎不起作用.. $('.parent-class:visible .my-class[state!="done"]') 我想选择其 .parent-class 元素为

Alpine.js Laravel Jetstream 组件中的“paginationData 未定义”错误

我正在使用 Alpine.js 和 Livewire 开发 Laravel Jetstream 项目。我在控制台中遇到错误，表明 paginationData 未定义，尽管我已正确导入它...

jQuery 函数参数中的动态变量

我使用下面的代码来启动幻灯片： 目标.循环({ 超时：0， 之前：之前， 之后：在之后， 下一个：目标+'，#slide-next'， ...

过滤 DOM 中具有通用“类”名称的元素并在其上应用 CSS - JQuery

在 DOM 中，我可以过滤掉类名以特定单词开头的元素，这里是answer_list_two cpts_，结果如下所示。 $('[class^="answer_list_two cpts_"...

我可以覆盖选择输入的 onChange 触发器吗？

我有一个选择输入并想更改其行为。我通常在某个框架（闪亮）中使用选择输入，所以我希望我在这里给出的示例是可以理解和精确的。 ...

JQuery 弹出窗口重置

抱歉，我对 Javascript 很绝望。我有一个脚本，显示一个弹出窗口，然后淡出。但我无法让它重置。目前的代码只能运行一次。 函数 myFunction$user...

JQuery 弹出窗口重置

抱歉，我对 Javascript 很绝望。我有一个脚本，显示一个弹出窗口，然后淡出。但我无法让它重置。目前的代码只能运行一次。 函数 myFunction$user...

如果视频在视口中/不在视口中，则自动播放/暂停视频

如果视频在视口中/不在视口中，我需要播放/暂停视频。 到目前为止它有效。问题是，如果用户按下暂停，视频就会再次开始播放。 // 限制...

当我使用 jquery 加载 PartialView html 时，使用 0 值 id 参数调用我未调用的控制器

我有这个View Edit.cshtml @model 产品视图模型 @{ 布局=“_Layout”； } 我有这个View Edit.cshtml @model ProdutoViewModel @{ Layout = "_Layout"; } <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="position-static my-5"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a asp-action="Index" asp-controller="Home">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Editar</li> </ol> </nav> <form enctype="multipart/form-data" class="mt-5" id="form-produto" asp-action="Edit" method="post" asp-controller="Produto"> <input hidden value="@Model.Id" name="id"/> <div class="row flex-md-row flex-sm-column"> <div class="col-md-2"> <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Informações</button> <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Imagens</button> <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Relacionados</button> <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button> </div> </div> <div class="tab-content col-md-10" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> <div class="container row"> @{ if (Model.Imagens.Where(img => img.Perfil).Count() > 0) { var perfil = Model.Imagens.Where(img => img.Perfil).First(); <div class="col-md-5 col-sm-12 img-container border border-2 rounded-4"> <div id="header-profile" class="row justify-content-end"> <a id="btn-profile" data-img-id="@perfil.Id" class="btn btn-close p-3"></a> </div> <img id="img-profile" class="p-3 card-img image" src="~/images/@(perfil.NomeArquivo+"."[email protected])" /> <div id="input-container" style="display:none"> <div class="input-group mb-3 mt-2"> <label class="btn btn-success custom-file-upload input-group-text w-100 justify-content-center d-flex" for="inputGroupFile01"> <i class="bi bi-upload mx-2"></i> Upload </label> <input name="imagemPerfil" type="file" class="form-control" id="inputGroupFile01"> </div> </div> </div> } else { <div class="col-md-5 col-sm-12 img-container"> <img id="img-profile" class="p-3 img-thumbnail image" src="~/images/img-icon.png" /> <div class=""> <div class="text">Hello World</div> </div> <div class="input-group mb-3"> <label class="input-group-text" for="inputGroupFile01">Upload</label> <input name="imagemPerfil" type="file" class="form-control" id="inputGroupFile01"> </div> </div> } } <div class="col justify-content-between pt-4"> <lable asp-for="Nome">Nome</lable> <input class="form-control" type="text" asp-for="Nome" /> <lable asp-for="Descricao">Descrição</lable> <textarea class="form-control h-auto" asp-for="Descricao"></textarea> <div class="col row d-flex"> <div class="col"> <lable asp-for="Preco">Preço</lable> <input class="form-control" type="text" asp-for="Preco" /> </div> <div class="col"> <lable>Categoria</lable> <select asp-for=IdCategoria class="form-select"> @foreach (var categoria in ViewBag.Categorias) { <option value="@categoria.Id"> @categoria.Nome </option> } </select> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> <div class="mt-2 container row"> <div id="gallery-container" class="row row-cols-1 row-cols-md-5 g-4 mx-auto"> @{ int id = 1; if (Model.Imagens.Where(img => !img.Perfil).Count() == 0) { <div class="card mx-3" id="card-@id"> <div id="header-@id" class="row justify-content-end"> </div> <div class=""> <img id="img-@id" src="~/images/img-icon.png" class="img-gallery card-img mb-2" alt="..."> </div> <div class="card-body p-0"> <hr id="line-@id" /> <div class=""> <div class="input-group justify-content-center"> <label id="label-@id" class="btn btn-success mt-0 pt-0 mb-3 input-group-text w-100 h-100" for="input-@id"> <i class="bi bi-upload mx-2"></i> Upload </label> <input name="imagens" type="file" class="form-control input-gallery" id="input-@id"> </div> </div> </div> </div> } foreach (var imagem in Model.Imagens.Where(img => !img.Perfil)) { <div class="card mx-3" id="card-@id"> <div id="header-@id" class="row justify-content-end"> <a id="btn-@id" data-img-id="@imagem.Id" class="btn btn-close p-3"></a> </div> <div class=""> <img id="img-@id" src="~/images/@(imagem.NomeArquivo + "." + imagem.Extensao)" class="img-gallery card-img mb-2" alt="..."> </div> </div> ++id; if (id == Model.Imagens.Where(img => !img.Perfil).Count() + 1) { <div class="card mx-3" id="card-@id"> <div id="header-@id" class="row justify-content-end"> </div> <div class=""> <img id="img-@id" src="~/images/img-icon.png" class="img-gallery card-img mb-2" alt="..."> </div> <div class="card-body p-0"> <hr id="line-@id" /> <div class=""> <div class="input-group justify-content-center"> <label id="label-@id" class="btn btn-success mt-0 pt-0 mb-3 input-group-text w-100 h-100" for="input-@id"> <i class="bi bi-upload mx-2"></i> Upload </label> <input name="imagens" type="file" class="form-control input-gallery" id="input-@id"> </div> </div> </div> </div> } } } </div> </div> </div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> <input class="form-control" id="input-text-produto"/> <div id="card-produto-container"> </div> </div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div> </div> </div> <button type="submit" class="btn btn-success float" id="save-button"> <i class="bi bi-floppy"></i></button> <div class="fixed-bottom row d-flex justify-content-end"> </div> </form> @section Scripts { <script> $(document).ready(function () { $('#inputGroupFile01').change(function () { var input = this; //console.log(input) if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img-profile').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } }); let idStart = @Model.Imagens.Count() == 0 ? 1 : @Model.Imagens.Count() let args = { input: 'input-'+idStart, img: 'img-'+idStart, card: 'card-'+idStart, header: 'header-'+idStart, label: 'label-'+idStart, line: 'line-'+idStart } function initGallery(args) { setEvents(args) } function setCloseEvents(idLimit) { for (let i = 1; i <= idLimit; ++i) { let btn = $('#btn-' + i) btn.click(function () { let card = $('#card-'+i) console.log(i) imgId = btn.data('img-id') $('#gallery-container').append(`<input hidden name="imgsDeletadas" value="${imgId}"/>`) card.remove() }) } } function setCloseEventProfile() { let btn = $('#btn-profile').click(function () { let img = $('#img-profile').attr('src', '/images/img-icon.png') let imgId = btn.data('img-id') var headerProfile = $('#header-profile') let inputContainer = $('#input-container') inputContainer.show() headerProfile.hide() $('#gallery-container').append(`<input hidden name ="imgsDeletadas" value ="${imgId}" />`) }) } $('#input-text-produto').on('input', function (event) { let cardParameters = { resultsQtd : 3, searchValue : "" } $.post('/Produto/LoadCards', cardParameters) .done(function (result) { console.log(result) $('#card-produto-container').html(result) }) }) let limit = idStart - 1 setCloseEvents(limit) setCloseEventProfile() initGallery(args) }) </script> } 我的问题是：当我调用以下ajax请求并将结果加载到div中时（如果我只在控制台中打印内容，则不会发生任何错误），我的控制器中的方法Edit被调用，ID为0，该方法不存在，并返回错误，因为控制器在 db 中找不到 0 id。 $('#input-text-produto').on('input', function (event) { let cardParameters = { resultsQtd : 3, searchValue : "" } $.post('/Produto/LoadCards', cardParameters) .done(function (result) { console.log(result) $('#card-produto-container').html(result) }) 这是我的部分视图： @model CardResponse<ProdutoViewModel> <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> @foreach(var produto in Model.Result) { <div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">@produto.Nome</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> } </div> </div> 这是我的控制器： using Microsoft.AspNetCore.Mvc; using kssgrafica.Data; using kssgrafica.Models; using kssgrafica.Models.ViewModels; using ImageMagick; using kssgrafica.Services; using kssgrafica.Services.ImageHandler; using kssgrafica.Services.ImageHandler.Dtos; using Microsoft.EntityFrameworkCore; using AutoMapper; using kssgrafica.Models.AuxiliaryModels; using kssgrafica.Extensions; namespace kssgrafica.Controllers { public class ProdutoController(ApplicationDbContext context, IImageHandler _imageHandler, IMapper mapper) : Controller { private readonly ApplicationDbContext _context = context; private readonly IMapper _mapper = mapper; private string DefaultPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images"); public IActionResult Index() { var produtos = _context.Produtos.Include(p => p.Categoria).Include(p => p.Imagens).ToList(); var produtosViewModel = _mapper.Map<List<ProdutoViewModel>>(produtos); return View(produtosViewModel); } public async Task<IActionResult> LoadTable(DtParameters dtParameters) { var searchBy = dtParameters.Search?.Value; // if we have an empty search then just order the results by Id ascending var orderCriteria = "Id"; var orderAscendingDirection = true; if (dtParameters.Order != null) { // in this example we just default sort on the 1st column orderCriteria = dtParameters.Columns[dtParameters.Order[0].Column].Data; orderAscendingDirection = dtParameters.Order[0].Dir.ToString().ToLower() == "asc"; } var produtos = await _context.Produtos.ToListAsync(); var produtosViewModel = _mapper.Map<List<ProdutoViewModel>>(produtos); var result = produtosViewModel.AsQueryable(); if (!string.IsNullOrEmpty(searchBy)) { result = result.Where(r => r.Nome != null && r.Nome.ToUpper().Contains(searchBy.ToUpper()) || r.Descricao != null && r.Descricao.ToUpper().Contains(searchBy.ToUpper()) || r.Preco != null && r.Preco.ToString().ToUpper().Contains(searchBy.ToUpper()) || r.Id != null && r.Id.ToString() == searchBy.ToUpper()); } result = orderAscendingDirection ? result.OrderByDynamic(orderCriteria, DtOrderDir.Asc) : result.OrderByDynamic(orderCriteria, DtOrderDir.Desc); // now just get the count of items (without the skip and take) - eg how many could be returned with filtering var filteredResultsCount = result.Count(); var totalResultsCount = await _context.Produtos.CountAsync(); return Json(new DtResult<ProdutoViewModel> { Draw = dtParameters.Draw, RecordsTotal = totalResultsCount, RecordsFiltered = filteredResultsCount, Data = result .Skip(dtParameters.Start) .Take(dtParameters.Length) .ToList() }); } public IActionResult Create() { ViewBag.Categorias = _context.CategoriasProduto.ToList(); return View(); } [HttpPost] public async Task<IActionResult> Create(ProdutoViewModel produtoViewModel, List<IFormFile> imagens, IFormFile imagemPerfil) { produtoViewModel.DataCadastro = DateTime.UtcNow; var produto = _mapper.Map<Produto>(produtoViewModel); _context.Add(produto); await _context.SaveChangesAsync(); await SalvarImagens(imagens, imagemPerfil, produto); return RedirectToAction(nameof(Index)); } [HttpGet] public async Task<IActionResult> Edit(int id) { ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync(); var produto = await _context.Produtos.Where(p => p.Id == id).Include(p => p.Imagens).FirstOrDefaultAsync(); var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto); return View(produtoViewModel); } [HttpPost] public async Task<IActionResult> Edit(ProdutoViewModel produtoViewModel, int[] imgsDeletadas, List<IFormFile> imagens, IFormFile imagemPerfil) { var produto = _mapper.Map<Produto>(produtoViewModel); _context.Update(produto); await DeleteImages(imgsDeletadas); await SalvarImagens(imagens, imagemPerfil, produto); await _context.SaveChangesAsync(); return RedirectToAction(nameof(Index)); } [HttpPost] public async Task<IActionResult> LoadCards(CardParameters cardParameters) { var produtos = await _context.Produtos.Include(p => p.Imagens).ToListAsync(); var result = _mapper.Map<List<ProdutoViewModel>>(produtos); if (!string.IsNullOrEmpty(cardParameters.SearchValue)) { result = result.Where(p => p.Id.ToString().ToUpper() == cardParameters.SearchValue.ToUpper() || p.Nome != null && p.Nome.ToUpper().Contains(cardParameters.SearchValue.ToUpper()) || p.Descricao != null && p.Descricao.ToUpper().Contains(cardParameters.SearchValue.ToUpper())).ToList(); } var response = new CardResponse<ProdutoViewModel>() { Result = result.Take(cardParameters.ResultsQtd).ToList(), LengthTotalRegisters = await _context.Produtos.CountAsync(), LengthFiltredResults = result.Count() }; return PartialView("Cards",response); } private async Task SalvarImagens(List<IFormFile> imagensGaleriaArquivo, IFormFile imagemPerfilArquivo, Produto produto) { foreach(var arquivo in imagensGaleriaArquivo) { var imagemGaleria = new Imagem() { Nome = "", NomeArquivo = Guid.NewGuid().ToString(), File = arquivo, Extensao = _imageHandler.GetExtension(arquivo), IdProduto = produto.Id, Path = DefaultPath, Perfil = false }; var dtoGaleria = imagemGaleria.ToImageDto(); if(await _imageHandler.SaveImageAsync(dtoGaleria)) { try { _context.Add(imagemGaleria); } catch(Exception ex) { Console.WriteLine(ex.Message); _imageHandler.DeleteImage(dtoGaleria); } } } if(imagemPerfilArquivo != null) { var imagemPerfil = new Imagem() { Nome = "", NomeArquivo = Guid.NewGuid().ToString(), File = imagemPerfilArquivo, Extensao = _imageHandler.GetExtension(imagemPerfilArquivo), IdProduto = produto.Id, Path = DefaultPath, Perfil = true }; var dtoPerfil = imagemPerfil.ToImageDto(); try { if(await _imageHandler.SaveImageAsync(dtoPerfil)) { _context.Add(imagemPerfil); } } catch(Exception ex) { Console.WriteLine(ex.Message); _imageHandler.DeleteImage(dtoPerfil); } } await _context.SaveChangesAsync(); } private async Task DeleteImages(int[] imagesIds) { if(imagesIds.Length > 0) { var imagesIdsList = imagesIds.ToList(); var images = await _context.Imagens.Where(img => imagesIdsList.Contains(img.Id)).ToListAsync(); foreach(var img in images) { img.Path = DefaultPath; _imageHandler.DeleteImage(img.ToImageDto()); _context.Remove(img); } await _context.SaveChangesAsync(); } } } } 问题涉及到的方法有Edit、post and get、LoadCards。 我不知道为什么在加载 PartialView 时调用 Edit（get 方法），但我放置了一个 if 来处理 id 为 0 时的情况，返回 Ok()，但我想知道为什么会发生这种情况. 这是我的尝试： public async Task<IActionResult> Edit(int id) { if(id == 0) { return Ok(); } ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync(); var produto = await _context.Produtos.Where(p => p.Id == id).Include(p => p.Imagens).FirstOrDefaultAsync(); var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto); return View(produtoViewModel); } 由于未指定任何值，因此参数 id 将获取默认值为零的整数。尝试使用可空整数int?。我还没有测试过它，但我相信你的 lambda 中还需要 id.Value，因为我假设 p.Id 是 int。 public async Task<IActionResult> Edit(int? id) { if(id.HasValue) { ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync(); var produto = await _context.Produtos.Where(p => p.Id == id.Value).Include(p => p.Imagens).FirstOrDefaultAsync(); var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto); return View(produtoViewModel); } else { return Ok(); } }

缓慢导航至 URL 中的 id

在我的主页上，我有一个带有ID的菜单，当我单击它时，它会滑动到相应的div并且工作顺利。 但是，当我不在主页上并且单击某个项目时，我希望能够转到