如何为对比滑块添加点击图片调整滑块位置的功能？

要给这个对比滑块添加「点击左右区域移动滑块」的功能，你可以在滑块初始化逻辑中加入点击事件监听，通过计算点击位置的百分比来调整滑块和上层图片的位置，具体修改如下：

步骤1：添加点击事件逻辑 #

在初始化每个滑块的循环里，给滑块容器绑定点击事件，判断点击位置并计算对应的滑块位置：

$(document).ready(function() {
    if ($(".comparison-slider")[0]) {
        let compSlider = $(".comparison-slider");
    
        compSlider.each(function() {
            let $this = $(this);
            let compSliderWidth = $this.width() + "px";
            $this.find(".resize img").css({ width: compSliderWidth });
            drags($this.find(".divider"), $this.find(".resize"), $this);

            // 新增：绑定点击事件
            $this.on("click", function(e) {
                const $container = $(this);
                const $divider = $container.find(".divider");
                const $resize = $container.find(".resize");
                
                const containerOffset = $container.offset().left;
                const containerWidth = $container.outerWidth();
                const dragWidth = $divider.outerWidth();
                const clickX = e.pageX;

                // 计算点击位置相对于容器的百分比
                let targetPercent = ((clickX - containerOffset) / containerWidth) * 100;
                
                // 保持和拖拽时一致的边界限制，避免滑块超出容器范围
                const minPercent = (10 / containerWidth) * 100; // 对应原代码的minLeft偏移
                const maxPercent = 100 - ((dragWidth + 10) / containerWidth) * 100; // 对应原代码的maxLeft偏移
                targetPercent = Math.max(minPercent, Math.min(maxPercent, targetPercent));
                
                const widthValue = `${targetPercent}%`;
                $divider.css("left", widthValue);
                $resize.css("width", widthValue);
            });
        });

        $(window).on("resize", function() {
            let compSliderWidth = compSlider.width() + "px";
            compSlider.find(".resize img").css({ width: compSliderWidth });
        });
    }
});

// 原drags函数保持不变
function drags(dragElement, resizeElement, container) {
    let touched = false;
    window.addEventListener('touchstart', function() {
        touched = true;
    });
    window.addEventListener('touchend', function() {
        touched = false;
    });
    
    dragElement.on("mousedown touchstart", function(e) {
            dragElement.addClass("draggable");
            resizeElement.addClass("resizable");
            let startX = e.pageX ? e.pageX : e.originalEvent.touches[0].pageX;
            let dragWidth = dragElement.outerWidth();
            let posX = dragElement.offset().left + dragWidth - startX;
            let containerOffset = container.offset().left;
            let containerWidth = container.outerWidth();
            let minLeft = containerOffset + 10;
            let maxLeft = containerOffset + containerWidth - dragWidth - 10;
            
            dragElement.parents().on("mousemove touchmove", function(e) {
                if ( touched === false ) {
                    e.preventDefault();
                }
                let moveX = e.pageX ? e.pageX : e.originalEvent.touches[0].pageX;
                let leftValue = moveX + posX - dragWidth;

                if (leftValue < minLeft) {
                    leftValue = minLeft;
                } else if (leftValue > maxLeft) {
                    leftValue = maxLeft;
                }

                let widthValue = (leftValue + dragWidth / 2 - containerOffset) * 100 / containerWidth + "%";

                $(".draggable").css("left", widthValue).on("mouseup touchend touchcancel", function() {
                    $(this).removeClass("draggable");
                    resizeElement.removeClass("resizable");
                });
                
                $(".resizable").css("width", widthValue);
                
            }).on("mouseup touchend touchcancel", function() {
                dragElement.removeClass("draggable");
                resizeElement.removeClass("resizable");
            });
        
        }).on("mouseup touchend touchcancel", function(e) {
            dragElement.removeClass("draggable");
            resizeElement.removeClass("resizable");
        });
}

逻辑说明 #

• 点击事件绑定在滑块容器上，通过e.pageX获取点击的横坐标，计算其相对于容器的百分比位置
• 沿用原拖拽逻辑中的边界限制（左右各留10px的安全距离），确保滑块不会超出容器范围
• 直接设置滑块(.divider)的left属性和上层图片容器(.resize)的width属性，和拖拽时的更新逻辑保持一致

修改后，点击滑块任意区域，滑块都会移动到对应位置，且完全兼容原有的拖拽功能。

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