您如何僅針對.each函式的子項，而不是該類的所有元素？-有解無憂

我有左/右箭頭，單擊時使用 jQuery 將元素向左/右移動，并且當 .sliding-element 的位置移過 0 時顯示左箭頭元素。

我正在使用此代碼在下面的可運行代碼段中隱藏和顯示左箭頭元素。

$carouselList.animate({
    left: moveto
    }, 400, function() {
    if (moveto == 0) {
      $('.arrow-left').hide(); 
    } else {
      $('.arrow-left').show();
    }
});

問題是這隱藏了所有.arrow-left 元素，而不僅僅是這個.js-carousel 滑塊元素的子元素。我怎樣才能讓它隱藏這個向左的箭頭，而不是頁面上的所有箭頭？

謝謝

    jQuery(document).ready(function( $ ){

        $(".js-carousel").each(function(){
    
            $('.arrow-left').hide();
    
            var $carousel = $(this),
                $carouselContainer = $carousel.find(".books-container"),
                $carouselList = $carousel.find(".sliding-element"),
                $carouselItem = $carousel.find(".book"),
                $carouselButton = $carousel.find(".js-carousel-button"),
                setItemWidth = function(){
                    $carouselList.removeAttr("style");
                    var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
                    $carouselList.css("width", curWidth);
                },
                slide = function(){
                    var $button = $(this),
                        dir = $button.data("dir"),
                        curPos = parseInt($carouselList.css("left")) || 0,
                        moveto = 0,
                        containerWidth = $carouselContainer.outerWidth(),
                        listWidth = $carouselList.outerWidth(),
                        before = (curPos   containerWidth),
                        after = listWidth   (curPos - containerWidth);
                    if(dir=="next"){
                        moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
                    } else {
                        moveto = (before >= 0) ? 0 : curPos   containerWidth;
                    }
                    
/*THIS BIT HERE IS WHAT NEEDS FIXING*/  
                    $carouselList.animate({
                        left: moveto
                        }, 400, function() {
                        if (moveto == 0) {
                          $('.arrow-left').hide(); 
                        } else {
                          $('.arrow-left').show();
                        }
                    });
/*END OF BIT THAT NEEDS FIXING*/    

                };
            $(window).resize(function(){
                setItemWidth();
            });
            setItemWidth();
            
            $carouselButton.on("click", slide);
        
        
        
        });


    });

.books-container {
            overflow: hidden;
        }
        .sliding-element {
            position: relative;
            display: flex;
        }
        .book {
            padding: 1em;
        }
        .arrows {
            position:relative;
            width: 100%;
        }
        .arrow-right {
            right: -5px;
        }
        .arrow-left {
            left: -5px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div id="slider1" class="js-carousel">
    <div class="books-container">

        <div class="flex flex-wrap sliding-element">
        
        
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 1</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 2</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 3</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 4</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 5</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 6</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 7</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 8</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 9</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 10</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 11</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 12</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 13</p>
                </a>
            </div>
            
            
        </div>
      
      <div class="arrows">
                        <div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
                        <div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
                    </div>

    </div>
    </div>
    
    
    <div id="slider2" class="js-carousel">
    <div class="books-container">

        <div class="flex flex-wrap sliding-element">
        
        
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 1</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 2</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 3</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 4</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 5</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 6</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 7</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 8</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 9</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 10</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 11</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 12</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 13</p>
                </a>
            </div>
            
            
        </div>
      
      <div class="arrows">
                        <div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
                        <div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
                    </div>

    </div>
    </div>

uj5u.com熱心網友回復：

要定位當前回圈中的.arrow-left元素，請使用jQuery 物件中的方法，該物件包含對輪播的參考。.js-carouselfind()

這是一個如何做到這一點的示例，以及一些小的代碼改進：

jQuery($ => {
  $(".js-carousel").each((i, carousel) => {
    let $carousel = $(carousel);
    let $arrowLeft = $carousel.find('.arrow-left').hide();
    let $carouselContainer = $carousel.find(".books-container");
    let $carouselList = $carousel.find(".sliding-element");
    let $carouselItem = $carousel.find(".book");
    let $carouselButton = $carousel.find(".js-carousel-button");

    let setItemWidth = function() {
      $carouselList.removeAttr("style");
      var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
      $carouselList.width(curWidth);
    };

    let slide = function() {
      let $button = $(this);
      let dir = $button.data("dir");
      let curPos = parseInt($carouselList.css("left"), 10) || 0;
      let moveto = 0;
      let containerWidth = $carouselContainer.outerWidth();
      let listWidth = $carouselList.outerWidth();
      let before = (curPos   containerWidth);
      let after = listWidth   (curPos - containerWidth);
      
      if (dir == "next") {
        moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
      } else {
        moveto = (before >= 0) ? 0 : curPos   containerWidth;
      }

      $carouselList.animate({
        left: moveto
      }, 400, function() {
        $arrowLeft.toggle(moveto !== 0);
      });
    };

    $(window).on('resize', setItemWidth);
    setItemWidth();
    $carouselButton.on("click", slide);
  });
});

.books-container {
  overflow: hidden;
}

.sliding-element {
  position: relative;
  display: flex;
}

.book {
  padding: 1em;
}

.arrows {
  position: relative;
  width: 100%;
}

.arrow-right {
  right: -5px;
}

.arrow-left {
  left: -5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="slider1" class="js-carousel">
  <div class="books-container">
    <div class="flex flex-wrap sliding-element">
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 1</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 2</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 3</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 4</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 5</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 6</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 7</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 8</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 9</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 10</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 11</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 12</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 13</p>
        </a>
      </div>
    </div>
    <div class="arrows">
      <div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
      <div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
    </div>
  </div>
</div>
<div id="slider2" class="js-carousel">
  <div class="books-container">
    <div class="flex flex-wrap sliding-element">
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 1</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 2</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 3</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 4</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 5</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 6</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 7</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 8</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 9</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 10</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 11</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 12</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 13</p>
        </a>
      </div>
    </div>
    <div class="arrows">
      <div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
      <div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

你可以var $this = $(this)在你的.each函式之后添加它。
然后使用$('.arrow-left', $this).show();查找與您的輪播相關的元素。

演示

顯示代碼片段

jQuery(document).ready(function($) {

  $(".js-carousel").each(function() {
    var $this = $(this)
    $('.arrow-left').hide();

    var $carousel = $(this),
      $carouselContainer = $carousel.find(".books-container"),
      $carouselList = $carousel.find(".sliding-element"),
      $carouselItem = $carousel.find(".book"),
      $carouselButton = $carousel.find(".js-carousel-button"),
      setItemWidth = function() {
        $carouselList.removeAttr("style");
        var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
        $carouselList.css("width", curWidth);
      },
      slide = function() {
        var $button = $(this),
          dir = $button.data("dir"),
          curPos = parseInt($carouselList.css("left")) || 0,
          moveto = 0,
          containerWidth = $carouselContainer.outerWidth(),
          listWidth = $carouselList.outerWidth(),
          before = (curPos   containerWidth),
          after = listWidth   (curPos - containerWidth);
        if (dir == "next") {
          moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
        } else {
          moveto = (before >= 0) ? 0 : curPos   containerWidth;
        }

        /*THIS BIT HERE IS WHAT NEEDS FIXING*/
        $carouselList.animate({
          left: moveto
        }, 400, function() {
          if (moveto == 0) {
            $('.arrow-left', $this).hide();
          } else {
            $('.arrow-left', $this).show();
          }
        });
        /*END OF BIT THAT NEEDS FIXING*/

      };
    $(window).resize(function() {
      setItemWidth();
    });
    setItemWidth();

    $carouselButton.on("click", slide);



  });


});

.books-container {
  overflow: hidden;
}

.sliding-element {
  position: relative;
  display: flex;
}

.book {
  padding: 1em;
}

.arrows {
  position: relative;
  width: 100%;
}

.arrow-right {
  right: -5px;
}

.arrow-left {
  left: -5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="slider1" class="js-carousel">
  <div class="books-container">

    <div class="flex flex-wrap sliding-element">


      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 1</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 2</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 3</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 4</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 5</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 6</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 7</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 8</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 9</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 10</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 11</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 12</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 13</p>
        </a>
      </div>


    </div>

    <div class="arrows">
      <div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
      <div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
    </div>

  </div>
</div>


<div id="slider2" class="js-carousel">
  <div class="books-container">

    <div class="flex flex-wrap sliding-element">


      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 1</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 2</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 3</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 4</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 5</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 6</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 7</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 8</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 9</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 10</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 11</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 12</p>
        </a>
      </div>
      <div class="book flex flex-column">
        <a href="#apage">
          <p>Element 13</p>
        </a>
      </div>


    </div>

    <div class="arrows">
      <div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
      <div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
    </div>

  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/455673.html

標籤：javascript jQuery

上一篇：C:太多的初始化值

下一篇：Accessdb中兩個表之間的連接不起作用