Question

我绝对是Java语言的初学者，但是我知道C＃就像我的手背一样。所以我陷入了我写的代码，使我看起来完全没问题，甚至都不知道从哪里开始

var correntItem=bottleNum1;
        function animation(bottleNum){
            if(correntItem!=bottleNum)
            {
            document.getElementById(bottleNum).className="animation_in";
            document.getElementById(correntItem).classname="animation_out";
            correntItem=bottleNum;
            }
        }

a{
            text-decoration: none;
        }
        #bottleNum1{
            max-width: 10%;
            transform:translateX(-150px)
            
        }
        #bottleNum2{
            max-width: 10%;
            transform:translateX(-150px)
        }
        .animation_in{
            animation-fill-mode:forwards;
            animation-name:slide_in;
            animation-duration:1s;
        }.animation_out{
            animation-fill-mode:forwards;
            animation-name:slide_out;
            animation-duration:1s;
        }
        @keyframes slide_out{
            0%{transform:translateX(600px)scale(1)}
            100%{transform: translateX(1350px)scale(1)}
        }
        @keyframes slide_in{
            0%{transform:translateX(-150px) scale(1)}
            100%{transform:translateX(600px) scale(1)}
        }

   <!DOCTYPE html>
<html>
        <meta charset="UTF-8" >
   <body>
        <a href="#" width="100%" onclick="animation(bottleNum1)" >bottle #1</a>
        <a href="#2" width="100%" onclick="animation(bottleNum2)" >bottle #2</a>
        <img src="img/bottle.png" id="bottleNum1">
        <img src="img/bottle2.png" id="bottleNum2" style="display:none">
    </body>
 </html>

动画工作正常但现在什么都行不通

Answer 1

问题出在javascript

var correntItem='bottleNum1';
function animation(e){
    var bottleNum = e.id;
    if (correntItem !== bottleNum) {
        var bottleNumElement = document.getElementById(bottleNum);
        bottleNumElement.style.display = 'block';
        bottleNumElement.className = 'animation_in';
        
        var currentItemElement = document.getElementById(correntItem);
        currentItemElement.style.display = 'none';
        currentItemElement.classname="animation_out";
        
        correntItem=bottleNum;
    }
}

a{
    text-decoration: none;
}
#bottleNum1{
    max-width: 10%;
    transform:translateX(-150px)
}
#bottleNum2{
    max-width: 10%;
    transform:translateX(-150px)
}
.animation_in{
    animation-fill-mode:forwards;
    animation-name:slide_in;
    animation-duration:1s;
}
.animation_out{
    animation-fill-mode:forwards;
    animation-name:slide_out;
    animation-duration:1s;
}
@keyframes slide_out{
    0%{transform:translateX(600px)scale(1)}
    100%{transform: translateX(1350px)scale(1)}
}
@keyframes slide_in{
    0%{transform:translateX(-150px) scale(1)}
    100%{transform:translateX(600px) scale(1)}
}

<!DOCTYPE html>
<html>
    <meta charset="UTF-8" >
    <body>
        <a href="#" width="100%" onclick="animation(bottleNum1)" >bottle #1</a>
        <a href="#2" width="100%" onclick="animation(bottleNum2)" >bottle #2</a>
        <img src="img/bottle.png" id="bottleNum1">
        <img src="img/bottle2.png" id="bottleNum2" style="display:none">
    </body>
</html>

如何修复我在JavaScript中制作的滑块

1 个答案: