如何根据ZURB twentytwenty插件滑块位置修改其他div的CSS属性？

问题点说明 #

1. 原有代码语法错误：if 后的判断条件必须用括号包裹，且css()方法传入对象是设置属性，仅传入属性名才能获取对应值。
2. 原有逻辑仅在页面加载时执行一次，不会监听滑块拖动的动态变化，拖动滑块时无法触发对应操作。
3. 滑块是插件动态生成的元素，需要等插件初始化完成后再执行逻辑，避免出现获取不到元素的情况。

完整实现代码 #

// 等页面资源、插件初始化完成后执行逻辑
$(window).on('load', function() {
    const $slider = $('.twentytwenty-container');
    const sliderTotalWidth = $slider.width();
    // 可自定义阈值：左侧判断为"几乎最左"的最大left值，右侧判断为"几乎最右"的最小left值
    const leftTriggerThreshold = sliderTotalWidth * 0.05;
    const rightTriggerThreshold = sliderTotalWidth * 0.95;

    // 监听滑块拖动时的移动事件
    $slider.on('mousemove touchmove', function() {
        // 获取滑块当前left的数值
        const currentLeft = parseInt($('.twentytwenty-handle').css('left'), 10);
        // 先隐藏所有hero元素
        $('.hero, .hero2, .hero3').hide();

        if (currentLeft >= rightTriggerThreshold) {
            // 拖动到几乎最右侧，显示hero2
            $('.hero2').show();
        } else if (currentLeft <= leftTriggerThreshold) {
            // 拖动到几乎最左侧，显示hero3
            $('.hero3').show();
        } else {
            // 中间位置显示默认hero
            $('.hero').show();
        }
    })
})

配置说明 #

• 若你使用的twentytwenty容器类名不是默认的.twentytwenty-container，替换为实际使用的类名即可。
• 阈值的比例可根据需求调整：需要完全滑到最右才触发就把0.95改为1，需要提前触发就调小该数值；左侧阈值同理。
• 对性能有要求的话可自行添加防抖函数减少触发次数，普通使用场景无需额外优化。

内容的提问来源于stack exchange，提问作者Overflow_hidden