Question

所以这是我的代码

<a href="#" class="slider-1-prev">prev</a>
<a href="#" class="slider-2-prev">prev</a>

如果点击其中任何一个，如何同时点击它？

如果我点击.slider-1-prev，我会点击.slider-2-prev 如果我点击.slider-2-prev，我点击.slider-2-prev

如何通过javascript制作？

Answer 1

除了在其他链接上触发事件之外，还需要屏蔽无限重复（例如使用屏蔽变量）：

var inClick = false;
$(document).ready(function {
    $('.slider-1-prev').on('click', function {
        if (!inClick) {
            inClick = true;
            $('.slider-2-prev').trigger('click');
            inClick = false;
        }
    });
    $('.slider-2-prev').on('click', function {
        if (!inClick) {
            inClick = true;
            $('.slider-1-prev').trigger('click');
            inClick = false;
        }
    });
})

如果你想要一个更短的版本，你可以在一个处理程序上监听并点击＆＃34;另一个＆＃34;：

var inClick = false;
$(document).ready(function {
    var $sliders = $('.slider-1-prev,.slider-2-prev');
    $sliders.on('click', function {
        if (!inClick) {
            inClick = true;
            // Click the one that was not clicked (not this)
            $sliders.not(this).trigger('click');
            inClick = false;
        }
    });
})

另一个选项有点复杂，因为您需要再次处理处理程序off然后再转换on。现在坚持这个简单的。

开/关方法涉及在执行时禁用处理，因此在重新连接之前它不会再次触发。缺点是您需要引用一个单独的函数，以便它可以有效地引用自身：

$(document).ready(function {
    var $sliders = $('.slider-1-prev,.slider-2-prev');

    // Define separate named function 
    var clickTheOtherOne = function(){
        // Disable the click
        $sliders.off('click');

        // Click the one that was not clicked (not this)
        $sliders.not(this).trigger('click');

        // Reenable the click handler
        $sliders.on('click', clickTheOtherOne);
    }
    // Initial enabling of the handler
    $sliders.on('click', clickTheOtherOne);
});

Answer 2

如果他们的行为相同，为什么不为两者定义一个函数？

$('.slider-1-prev, .slider-2-prev').click(function(){
    //... mutual code
});

Answer 3

我无法理解为什么你需要做你要求的事情，但尝试这种方法：

js code：

// this will work on all classes that start with 'slider-prev'
$('*[class^="slider-prev"]').on('click',function{
          // do something
});

当然，您需要将您的htm代码更改为：

<a href="#" class="slider-prev-1">prev</a>
<a href="#" class="slider-prev-2">prev</a>

Answer 4

这应该可以解决问题

$(document).ready(function{
     $('.slider-1-prev').on('click',function{
          $('.slider-2-prev').trigger('click');
     });
     $('.slider-2-prev').on('click',function{
          $('.slider-1-prev').trigger('click');
     });
})

Answer 5

试试这个 -

$('.slider-1-prev').click(function(){
 $('.slider-2-prev').trigger('click');
});

// If you need the opposite, then do - 
$('.slider-2-prev').click(function(){
 $('.slider-1-prev').trigger('click');
});

一键点击2锚

5 个答案: