是否可以在jQuery中创建一个可以绑定到任何样式更改的事件侦听器？例如,如果我想在元素更改维度时"执行"某些操作,或者我可以执行样式属性中的任何其他更改:
$('div').bind('style', function() {
console.log($(this).css('height'));
});
$('div').height(100); // yields '100'
这将非常有用.
有任何想法吗？
UPDATE
很抱歉自己回答这个问题,但我写了一个可能适合其他人的简洁解决方案:
(function() {
var ev = new $.Event('style'),
orig = $.fn.css;
$.fn.css = function() {
$(this).trigger(ev);
return orig.apply(this, arguments);
}
})();
这将临时覆盖内部prototype.css方法,并在最后用触发器重新定义它.它的工作原理如下:
$('p').bind('style', function(e) {
console.log( $(this).attr('style') );
});
$('p').width(100);
$('p').css('color','red');
我希望有类似的东西:
$('#myDiv').bind('class "submission ok" added'){
alert('class "submission ok" has been added');
});
我有一个模态,在该模态中,有一个显示大隐藏内容的下拉列表,它正在工作.
现在,当您打开下一个模态,堆叠在第一个模态的顶部并将其关闭时,下方模态的滚动将被禁用.
我已经创建了一个完整的示例,包括复制我面临的问题的步骤.你可以在这里看到它.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<title></title>
<style>
</style>
</head>
<body>
<input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" >
<div class="modal fade" id="modal_1">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">First Modal</h4>
</div>
<div class="modal-body">
<form class="form">
<div class="form-group">
<label>1) Open This First: </label>
<input type="button" data-toggle="modal" data-target="#modal_2" class="btn btn-primary" value="Open Modal 2" >
</div>
<div class="form-group">
<label>2) Change this …我使用的是添加了类插件open来.slide-out-div打开时.
所以我试图改变一些css如果检测到打开.
我需要做的是
IF
$('.slide-out-div **open**') IS Detected then
$('.otherDiv').css('top','0px');
不知道怎么把它们放在一起......
我想在包含触发器类的div标签被更改时触发我的事件.
我不知道如何让它听取课程的添加事件.
<div id="test">test</div>
<script type="text/javascript">
document.getElementById.setAttribute("class", "trigger");
function workOnClassAdd() {
alert("I'm triggered");
}
</script>
我正在等待document.ready事件,以便在我的页面上执行某些操作.
一些其他脚本,我无法改变,一旦我的脚本被调用,就没有发挥其魔力.因此,类名称上的jquery选择失败,因为DOM中尚不存在该类.
这就是为什么我想告诉我的函数在元素获得某个类之前监听,然后用它做一些事情.
我该如何实现这一目标？
是否有非轮询方法来监听元素计算样式的更改？
这个幻想代码片段应该简洁地解释我的意思:
var el = document.getElementById('doodad');
el.addComputedStyleChangeListener('width', function (prev, new) {
alert('Previous width: ' + prev + '; New width: ' + new);
});
我知道DOMAttrModified突变事件和即将发生的事件MutationObserver,但两者都不够 - 它们只能用于观察style元素的DOM属性,这并不能完全确定元素的计算样式.
这个问题的用例原本就是这个问题的一部分,这真的只会引起我的好奇心.
将 html 列表设为 ,
<ul id="slider">
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class="selected"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<ul>
我正在将选定的类添加到任何 li 元素。在这里，我将 class="selected" 添加到第四个 li 元素。
想要在将所选类添加到任何 li 元素时执行一些代码。
试过这个，但没有按预期工作。
<script>
$(function() {
$('#slider').bind('DOMSubtreeModified', function(e) {
alert("Changed");
});
});
</script>
我有一个带有客户端验证的表单，当检测到错误输入时，输入字段的类属性会发生更改；它被更改为包括"input-validation-error"类。
我想更改这个类，以便不使用它而是使用 Bootstraps class "is-invalid"。
我尝试使用 ASP.NET Core 的TagHelpers，但这没有效果；我相信这不会起作用，因为助手只有在加载“整个页面”时才会起作用，它对客户端验证没有帮助。
当我在 .NET 项目中搜索时，会发现 .NET 项目中定义的 css 类"Unobtrusive validation support library for jQuery"。
更改此类的最佳方法是什么？
CSS 能否通过将一个类更改为另一个类来提供帮助？ （覆盖原来的类，不确定这是否可能）
或者应该使用 JavaScript 来重新配置JQuery？
这是我的 TagHelper，添加了助手：validation-for,validation-error-class,validation-valid-class
表单/HTML...
<input type="email" asp-for="Email" id="inputEmail" class="form-control" placeholder="Email address" required
validation-for="Email" validation-error-class="is-invalid" validation-valid-class="is-valid"/>
<span class="small" asp-validation-for="Email"></span>
这是我的 TagHelper 的代码片段。
[HtmlTargetElement("input", Attributes = "validation-for,validation-error-class,validation-valid-class")]
public class ValidationErrorClassTagHelper : TagHelper
{
[HtmlAttributeName("validation-for")]
public ModelExpression For { get; set; }
[HtmlAttributeName("validation-error-class")]
public string ErrorClass …