Javascript / jQuery addClass / removeClass用於容器翻譯不起作用

Question

我正在嘗試制作一張可以移動幻燈片的幻燈片。 如果我按向左按鈕，我想向左移動（內容的寬度為358.8％，因此在屏幕上顯示的更多）。 但是，我編寫的jQuery代碼無法正常工作。 請幫忙！！！！！！！

**HTML CODE**

    <body>
        <div class="slideshow-container">
            <div id="arrow-left" class="arrow"></div>
            <div class="content">
            <div class="mySlides fade">
                <div class="content_container">
                    <img src="https://t1.kakaocdn.net/kakaocorp/operating/co/main-content/3254.png" class="contentImageRight">
                    <div class="ContentTextLeft">
                        HAHAHA
                    </div>
                </div>
                <div class="content_container">
                    <img src="https://t1.kakaocdn.net/kakaocorp/operating/co/main-content/3254.png" class="contentImageLeft">
                    <div class="ContentTextRight">
                        HAHAHA
                    </div>
                </div>
                <div class="content_container">
                    <img src="https://t1.kakaocdn.net/kakaocorp/operating/co/main-content/3254.png" class="contentImageRight">
                    <div class="ContentTextLeft">
                        HAHAHA
                    </div>
                </div>
            </div>

            <div class="mySlides fade">
                <div class="content_container">
                    <img src="https://t1.kakaocdn.net/kakaocorp/operating/co/main-content/3254.png" class="contentImageRight">
                    <div class="ContentTextLeft">
                        HAHAHA
                    </div>
                </div>
                <div class="content_container">
                    <img src="https://t1.kakaocdn.net/kakaocorp/operating/co/main-content/3254.png" class="contentImageLeft">
                    <div class="ContentTextRight">
                        HAHAHA
                    </div>
                </div>
                <div class="content_container">
                    <img src="https://t1.kakaocdn.net/kakaocorp/operating/co/main-content/3254.png" class="contentImageRight">
                    <div class="ContentTextLeft">
                        HAHAHA
                    </div>
                </div>
            </div>
            </div>
            <div id="arrow-right" class="arrow"></div>
        </div>
    </body>

JavaScript / jQuery代碼

    <script>
        $(document).ready(function(){
            $("#arrow-right").click(function(){
              $( "slideshow-container" ).removeClass( "onePosition" );
              $( "slideshow-container" ).addClass( "twoPosition" );
            });
        });

        $(document).ready(function(){
            $("#arrow-left").click(function(){
              $( ".content" ).removeClass( ".twoPosition" );
              $( ".content" ).addClass( ".onePosition" );
            });
        });
    </script>

兩個/一個位置的CSS代碼

  <style>
  .onePosition{
      transform: translate(5%);
      transition: transform 1s ease-in-out;
  }

  .twoPosition{
      transform: translate(-90%);
      transition: transform 1s ease-in-out;
  }
  </style>

在此處輸入圖片說明

Answer 1

您的所有標簽都不具有“ onePosition”或“ twoPosition”作為類
您的邏輯都應該在一個documentReady事件下，並且不需要為同一eventListener聲明多個。
如果這是您的方法，請提供您的CSS規則，因為它們似乎是繁重的工作，這可以通過轉換實現

Javascript / jQuery addClass / removeClass用於容器翻譯不起作用

問題描述

1 個解決方案

解決方案1
0 2018-06-11 01:32:32

Javascript / jQuery addClass / removeClass用於容器翻譯不起作用

問題描述

1 個解決方案

解決方案1 0 2018-06-11 01:32:32

解決方案1
0 2018-06-11 01:32:32