jquery - 在 Wordpress 中运行 jQuery Functions Document Ready & Window Resize
问题描述
我目前有一个工作脚本可以根据 WordPress 中 (document).ready 上的最大尺寸来调整一些 div 的大小。我还想在调整窗口大小时合并,它应该触发相同的功能。我在尝试添加 (window).resize 时遇到了很多麻烦 - 我尝试将它们组合起来,创建一个外部函数,甚至只是复制和粘贴相同的函数(但使用窗口调整大小而不是准备好文档作为触发器)。没有骰子...任何有关如何在 WP 中组合这两个触发器的帮助将不胜感激!
我为 Document Ready 准备的工作代码:
jQuery(document).ready(function($){
$('.service-row').each(function() {
var highestBox = 0;
$('.service-item', this).each(function() {
if ($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.service-item', this).height(highestBox);
});
});
解决方案
一种方法是将该代码包装在调整大小处理程序中,并在页面加载时触发调整大小事件以导致初始运行
jQuery(document).ready(function($) {
$(window).on('resize', function() {
$('.service-row').each(function() {
var highestBox = 0;
$('.service-item', this).each(function() {
if ($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.service-item', this).height(highestBox);
});
// trigger resize on page load
}).resize()
});
推荐阅读
- php - 函数 App\Exports\NilaiExport::__construct() 的参数太少,在第 112 行的 NilaiController.php 中传递了 0,而预期的正好是 1
- json - 如何遍历一个对象数组并创建一个 json 对象?
- html - 使用 HTML 的表格标记
- angular - 从 Angular Material Design Stepper 获取步骤索引
- spring-boot - Java 列表项在页面重新加载时重新添加到 thymeleaf 下拉列表中,多次出现
- javascript - Chrome:禁用用户在 Angular 中使用导航到上一页的能力
- c++ - GPU设备函数如何访问主机函数中定义的类对象?
- excel - VBA:如何根据复选框过滤工作表?
- javascript - 范围内的裁剪线
- sql - 使用 NOT LIKE 选择未按预期执行的数字列表 - Oracle SQL