Javascript / jQuery addClass / removeClass用于容器翻译不起作用

Question

I'm trying to have a slide that can move slide ways. 我正在尝试制作一张可以移动幻灯片的幻灯片。 If I press left button I want my to move left(the content have width of 358.8%, so more the that shows in screen). 如果我按向左按钮，我想向左移动（内容的宽度为358.8％，因此在屏幕上显示的更多）。 However, the jQuery code that I wrote is not working how I wanted to do. 但是，我编写的jQuery代码无法正常工作。 Please Help!!!!!!! 请帮忙！！！！！！！

**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 CODE 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 CODE for two/onePosition 两个/一个位置的CSS代码

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

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

enter image description here 在此处输入图片说明

Answer 1

none of your tags have either 'onePosition' or 'twoPosition' as classes 您的所有标签都不具有“ onePosition”或“ twoPosition”作为类
Your logic should all be under ONE documentReady event there's no need for multiple declarations for that same eventListener. 您的逻辑都应该在一个documentReady事件下，并且不需要为同一eventListener声明多个。
If this is your approach please provide your CSS rules as they seem to be the ones doing the heavy lifting, which is possible with transformations 如果这是您的方法，请提供您的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