jquery 相关问题

在javascript中使用window.onbeforeunload事件中的window.event.keyCode捕获f5按键事件始终为0而不是116

我正在创建一个 MVC 应用程序。有必要在关闭应用程序（即窗口/选项卡）时将会话中的变量设置为 null，但在刷新应用程序时则不需要。 我试过了...

VueJS 3 组合中的Select2

如何在组合VueJs3中创建select2组件？ 我正在学习新的 VueJS 3，当我想创建 select2 组件时，出现错误，请帮助我修复它。我已经尝试过

带有 onclick 事件集的很棒的字体图标

我正在尝试使用以下很棒的字体图标 作为我页面上列表中项目旁边的删除图标，如下所示： 第 1 项删除图标 第 2 项删除...

日期选择器的Onshow事件

我想在显示时向日期选择器添加类。我写了这段代码但不起作用。 这个怎么做？ $(targetEl).datepicker({ 日期格式：“年/月/日”， 更改月份：正确， 更改年份：t...

.NET 5 升级后 jQuery 类选择器不起作用[重复]

我正在进行 .NET5 升级，在升级代码时我发现我的 jQuery 类选择器不起作用。这是一个带有剃刀页面的 MVC 项目。 在我看来，我的剧本就在...

仅在浏览器关闭而不是刷新时注销用户

当用户关闭浏览器而不是刷新时注销用户。我使用这个，它有效，但用户也会在刷新浏览器时注销 @HostListener('窗口:卸载', ['$event']) 卸载处理程序（$事件）{ t...

使用 javascript 更改列的标题

我有一个奇怪的要求，涉及从弹出的 LOV 页面项更改交互式网格中的列标题，而无需每次参数时提交/重新加载页面

使用transformX内容溢出到页面边界之外

我有一个简单的项目。在该项目中，我有一个与 translateX 配合使用的抽屉。我的问题是，当我打开那个抽屉时，我的主要内容就超出了页面。 这个问题显示在...

使用iframe编辑浏览器中嵌入的pdf并将pdf直接保存到服务器

我有这个工作流程。 将包含表单字段的 pdf 加载到浏览器中（iframe 或 div 中的 pdf）。 用户填写 用户单击“提交”按钮（在另一个 div 中）保存 pdf。 我想要什么...

剑道组织图选择连续射击

编辑：我已经缩小了我认为正在发生的事情的范围。当弹出警报时（或者在我的实际用例中，我发布到打开新页面的表单），选择事件将重新触发。 我有一个基本的 Kendo Org C...

Jquery ui 可排序 - 以编程方式将每个 pawn 移动到它自己的位置

我一直在尝试使用jquery可排序为我的龙与地下城会话制作一个带有棋子（类似国际象棋）的简单网格系统。我正在将 Laravel 与 Blade 一起用于一个项目。 所以在下面的代码中，...

使用 printThis 时，LeafletJS 中的地图容器已初始化

我正在使用 printThis 从应用程序的页面中打印一堆元素。 我遇到以下错误： leaflet.js:5 未捕获错误：地图容器已初始化。 在 e.

迭代div内的div

如何迭代一个div内的div，并且如果它们都具有相同的“显示”值（“无”），则显示一条消息？ 我刚刚学习，我需要百分百使用它 jQuery 如何迭代一个 div 内的 div，并且如果它们都具有相同的“显示”值（“无”），则显示一条消息？ 我刚刚学习，我需要百分百使用它 jQuery <div class="test1"> <div class="test2" style="display:none"> </div> <div class="test2" style="display:none"> </div> <div class="test2" style="display:none"> </div> <div class="test2" style="display:none"> </div> </div> 我尝试使用 jQuery.each jQuery('.test1 > .test2').each(function(){ if(jQuery(this).css('display') == 'none'){ jQuery('.test_message').text('nothing'); } }) 您当前逻辑的问题是您正在单独测试每个 .test2 div，然后根据该单个元素输出消息。相反，您需要先检查所有元素，然后在必要时输出消息。 为此，您可以存储一个标志来确定 div 的状态，然后在其中任何一个与该状态不匹配时更改该标志。这是一个工作示例： jQuery($ => { let allHidden = true; $('.test1 > .test2').each(function() { if ($(this).css('display') !== 'none') { allHidden = false; return; } }) if (allHidden) { $('.test_message').text('nothing'); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <div class="test1"> <div class="test2" style="display:none"></div> <div class="test2" style="display:none"></div> <div class="test2" style="display:none"></div> <div class="test2" style="display:none"></div> </div> <div class="test_message"></div>

浏览器的后退按钮不起作用+如果不单击刷新按钮则不会加载内容

我对 JS/jQuery/Ajax 很陌生，我有这段代码。我希望文章标签中的内容发生变化，但在用户单击...的链接时保持所有其余部分（页眉、菜单和页脚）保持不变。

对 div 背景图像进行动画处理

我在 div 中有一个图像，使用 我在 div 中有一个图像，使用 <div style="background-image: url(...);></div> 相当大。 我想在背景图像中做一些运动。所以我想放大一点并做一些翻译，所以看起来图像移动了一点。 我希望它无限循环。 我尝试过将 Animate.css 与 <div class="animated pulse infinite"></div> 一起使用，但我不希望 div 移动，只希望 div 内的背景照片移动。脉冲效果也有点过分了。我只是想让它有一点动静。也许只是沿 x 方向向左平移，然后向右平移 编辑 我已经尝试过了 @keyframes animatedBackground { from { background-size: cover; background-position: 50% 22%; } to { background-size: cover; background-position: 100% 22%; } } 但是如果我使用background-size: cover似乎不起作用？ 编辑2 我发现它确实有效，但宽度是 100%，所以如果我使用 background-position: 50% 22%; 或 background-position: 100% 22%; 没有任何区别，但如果我改变 y 方向，它确实有效:-D 但是如果我将动画时间设置为超过 5 秒，它会变得非常滞后。有什么办法可以避免延迟吗？ 您可以使用 CSS3 @keyframes 来制作 background-position 的动画，例如： @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } #animate-area { width: 200px; height: 200px; background-image: url(https://picsum.photos/400/200); background-position: 0px 0px; background-repeat: repeat-x; animation: animatedBackground 10s linear infinite alternate; } <div id="animate-area"></div> 有关 CSS 动画的更多信息，请参阅 MDN。 html, body { height: 100%; margin: 0; } .outer { height:100%; overflow: hidden; } .inner { height:200%; width:100%; -webkit-animation:mymove 5s linear infinite; /* Safari and Chrome */ animation:mymove 5s linear infinite; background-image: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg'); background-size: 100% 50%; } @-webkit-keyframes mymove { from { background-position: 0% 0%; } to { background-position: 0% -100%; } } @keyframes mymove { from { background-position: 0% 0%; } to { background-position: 0% -100%; } } <div class="outer"> <div class="inner"></div> </div> #horizontal { width: 200px; height: 200px; background: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg'); -webkit-animation: backgroundScroll 20s linear infinite; animation: backgroundScroll 20s linear infinite; } @-webkit-keyframes backgroundScroll { from {background-position: 0 0;} to {background-position: -400px 0;} } @keyframes backgroundScroll { from {background-position: 0 0;} to {background-position: -400px 0;} } <div id="horizontal"></div> 在主 div 中放置一个 div。您正在从框架中看（可以这么说 - 想想相框）。 为内部div设置动画。 您可以通过在CSS中使用@keyframe动画来做到这一点。 这里有一些非常简单的例子：http://codepen.io/webdevpdx/pen/LNobWW 基本上，您声明了您的 div，然后您希望该 div 运行 1 个动画需要多长时间，包括供应商前缀： #box { -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ } 然后声明动画关键帧。您告诉动画在某些点应该是什么样子。您必须指定多少个点取决于您想要执行的动画。 这是一个简单的淡入淡出动画： @-webkit-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } 您可以在以下位置阅读有关该主题的更多信息：CSS Tricks 或 W3CSschool 一个建议是使用伪元素。它不会遇到与背景图像相同的问题，并且可以在标记中为您节省一个额外的元素 .anim { position: relative; width: 200px; height: 200px; overflow: hidden; } .anim::before { content: ''; position: absolute; left: 0; top: 0; width: 200%; height: 200%; background: url(http://lorempizza.com/400/400/3) no-repeat center bottom; animation: anim 15s linear infinite alternate; } @keyframes anim { from { transform: scale(1) translateX(0); } to { transform: scale(1.5) translateX(-50%); } } <div class="anim"></div>

HTML5 视频忽略 z-index

这就是我到目前为止所尝试的： 这就是我到目前为止所尝试的： <div id="video" style="position:absolute;margin-top: 231px;margin-left: 127px;"> <video width="520" height="390" style="z-index:-10;"> <source src="m/video.ogv" type="video/ogg"> <source src="m/video.mp4" type="video/mp4"> </video> </div> 我有一个固定的菜单，当菜单位于视频上方时，视频似乎忽略了 z 索引。我目前在 chrome windows 上工作，但运气不佳。有什么想法吗？ 对重叠的两个元素使用 css position:absolute 属性，并尝试为 0 赋予高于 z-index 的值 这是 jsFiddle 的工作示例。 CSS： #main_container { float: left; position: relative; left:0; top:0; } #video { position: absolute; left: 0px; top: 0px; min-height: 100%; min-width: 100%; z-index: 9997; }​ #overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 9998; } html: <div id="main_container"> <div id="overlay"></div> <video id="video" width="" height="" controls="controls" loop="loop" autoplay=""> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> </div> 注意：使用覆盖 div 来停用控件，您可以使用视频上的任何内容，如 jsFiddle 示例中所示。 来源：视频作为网站上的背景，按命令播放 在您的覆盖/菜单元素上，使用： backface-visibility: hidden; 这对我有用。我的猜测是它会触发元素上的 3D 渲染，从而消除 z-index 问题。 叠加层也需要是视频的同级。 如果视频是叠加层的子视频，则它将不起作用。 作品： <div id="container"> <div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;"> </div><!-- end #overlay --> <video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video> </div><!-- end #container --> 不工作： <div id="container"> <div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;"> <video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video> </div><!-- end #overlay --> </div><!-- end #container --> 我只在 Chrome 中尝试过这个，所以如果这不是普遍正确的话，我深表歉意。 @media (max-width: 48em) { .primary-navigation { position: fixed; inset: 0 0 0 30%; z-index: 1000; background: steelblue; flex-direction: column; padding: min(30vh,10rem) 2rem; background: hsl(0 0% 0% / 0.75); transform: translateX(100%); transition: transform 350ms ease-out; } .mobile-nav-toggle { display: block; position: absolute; background: url('assets/images/menu.png'); background-repeat: no-repeat; border: 0; width: 3rem; aspect-ratio: 1; top: 0.2rem; right: 1rem; z-index: 9999; } }

如何将逗号分隔的多选值传递到表单提交的网址

我的项目中有一个基本的 GET 表单，用于过滤用户创建的帖子。当我提交表单时，多重选择输入中的值将附加到 url 中，如下所示： 项目...

变量问题

我正在编写一个简单的 if/else 语句来显示下一个或上一个链接，但不知何故我的检查不起作用。这是代码 var newPosition = currPosition; $(".imageNavLink").click(function(甚至...

无法设置jquery多选的宽度

我正在使用 jquery 多重选择作为下拉列表，以便让用户有机会从下拉列表中选择多个项目 网页代码： 我正在使用 jquery 多重选择作为下拉列表，以便让用户有机会从下拉列表中选择多个项目 HTML代码： <div class="jobdiv"> <img src="~/Images/traj.png" width="22" height="24" /> @Html.DropDownListFor(model => Model.TrajName, @Model.Traj, new { @class = "jobdrpdown", id = "drpTraj", onchange = "GetSelectedTraj(this.value); ", multiple = "multiple" }) </div> 样式定义如下： .jobdiv { margin-right: 15px; margin-left: 15px; padding-bottom: 12px; } .jobdropdown { width: 194px; font-size: 13px; font-family: Arial; margin-right: 5px; height: 24px; } 在$(document).ready(function ()： $(document).ready(function () { $('#drpTraj').multiselect({ nonSelectedText: 'Select items below', width : 180, minWidth : 180 }); } 我的问题是我无法设置下拉菜单的宽度。我对多个组件使用相同的样式。 但 jquery multiselect 单独无法获取 width 属性。见下图： 此外，当我选择几个项目时，所选文本会超出指定的宽度。见下图： 如果我使用普通的下拉菜单，在这种情况下效果很好。预先感谢您提供任何宝贵的建议。 您是否尝试过使用.css()设置宽度： $('#drpTraj .ui-multiselect').css('width', '100%'); 我对多个组件使用相同的样式。 您可以在 style 选项中设置具有您的 classes 的班级： $('#drpTraj').multiselect({ nonSelectedText: 'Select items below', classes : "your-class-name" }); 希望这有帮助。 发生这种情况是因为多选将您的选择转换为 a 标签，不够高兴，它删除了您应用于选择的所有类。 因此，让它服从你的最好方法是将类应用于对象 ID： #drpTraj{ width: 350px; } 希望这有帮助。 看起来我们遇到了这个组件的限制。我找到了两个场景来解决。 如果只想更改按钮，则将页面样式添加到此控件： <style> #drpTraj{ width: 800px; } </style> 但是下拉列表仍然会很窄。 因此，为了修复下拉菜单，我在文件 jquery.multiselect.js 中更改了它 options: { buttonWidth: 800, // (integer | string | 'auto' | null) Sets the min/max/exact width of the button. 但是，它会更改应用程序中所有多选的设置。 示例在这里：https://github.com/sam-klok/WebAppGrid

使用 jQuery 更改复选框状态

我正在尝试开发一个 JQuery 脚本，通过根据不同复选框的状态将禁用属性设置为 true 来更改复选框的状态。 我有三个复选框 - 暂停，