Question

我敢打赌这很简单，我会尽力解释它：我正在尝试构建一个图库来显示不同的过渡并显示（例如，将叠加的div转换视为不可见），我希望有一个按钮，用户可以点击以通过悬停和点击体验相同的过渡。

为了达到这个目的，我简单地创建了一个我称为toggleButton的新变量，在0初始化它，并做了一个条件语句，说如果该变量为0，则转换应该在悬停时进行，toggleButton 1应该是{{1}}，转换适用于点击。每次按下更改它们的按钮时，我都会在控制台上记录变量更改，并且它工作正常，没有错误，但我无法实现我想要的，转换永远不会改变，它始终保持我初始化它的方式（如果我在1处初始化，则转换适用于点击）。

我用一个我正在谈论的小例子做了一个小提琴，我希望你能通过查看它来理解我想要的东西，以防我用单词解释它：http://jsfiddle.net/mcczrbgg/1/

提前致谢！

Answer 1

在第21行设置鼠标悬停的If / Else只运行一次。

尝试创建.mouseenter（）函数和.click（）函数，但在每个函数中，检查切换按钮的状态：

 $(".thumb").mouseenter(function() {
      if (toggleButton === 0) {

      }
 }
 $(".thumb").click(function() {
      if (toggleButton === 1) {

      {
 }

这是你的想法吗？

Answer 2

它不起作用的原因是因为你只在加载时运行一次该函数。每次运行切换事件时，还需要确保该函数运行。

这就是我要做的事情：

$(function(){

    var toggleButton = 0 ;
    console.log(toggleButton);

    $('.switchButton').toggle(function(){
        toggleButton = 1 ;
        $('.toggleButton').css({'transform' : 'rotateZ(0deg)'});
        $('#hover').removeClass('active');
        $('#click').addClass('active');
        console.log(toggleButton);
        runTransition();
        }, function(){
        toggleButton = 0 ;
        $('.toggleButton').css({'transform' : 'rotateZ(180deg)'});
        $('#hover').addClass('active');
        $('#click').removeClass('active');
        console.log(toggleButton);
        runTransition();
    });
    runTransition();
// thumb hover 
    function runTransition(){
        if ( toggleButton == 0 ) {
            $('.thumb').mouseenter(function(){
                $('.overlay').css({'left' : '-100%'});
            }).mouseleave(function(){
                $('.overlay').css({'left' : '0%'});
            });
        } else {
            $('.thumb').unbind('mouseenter mouseleave');

            $('.thumb').toggle(function(){
                $('.overlay').css({'left' : '-100%'});
            }, function(){
                $('.overlay').css({'left' : '0%'});
            });
        }
    }
});

根据变量更改鼠标事件

2 个答案: