Question

我有多个文本div容器（同一个类： .rocksZoom_textContainer ），我通过上/下滚动按钮控制它。这些容器永远不可见 - 它们之间有一个show（）/ hide（）。

按钮的代码如下：

$('.rocksZoom_textBox_btnUp').on('mouseenter', function(){
  if ($('.rocksZoom_textContainer').scrollTop() === 0){ return; }
  // 
});

$('.rocksZoom_textBox_btnUp').on('mouseleave', function(){
  // 
});

$('.rocksZoom_textBox_btnUp').on('mousedown', function(){
  if ($('.rocksZoom_textContainer').scrollTop() === 0){ return; }
  // 
  function scroll_ContDn(){
    $('.rocksZoom_textContainer').stop().animate({scrollTop:'-=50'}, 500, 'linear', scroll_ContDn);
  } 
  scroll_ContDn();
});

$('.rocksZoom_textBox_btnUp').on('mouseup', function(){
  if ($('.rocksZoom_textContainer').scrollTop() === 0){ return; }
  // 
  function stopScroll_ContDn(){
    // Stuff animated
  }
  stopScroll_ContDn();
});

show（）/ hide（）的jQuery代码：

function zoomContainer_showHide(){
  $(".rocksMenu_zoomContainer:visible").hide();
  $(".rocksMenu_zoomContainer").eq(menuItem_place).show();
}

HTML：

<div class="rocksZoom_textContainer">
  <p>Text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text...</p>
</div>

如何重复使用按钮功能来独立处理所有文本容器？

佩德罗

Answer 1

由于一次只能看到1个rocksZoom_textContainer，你可以使用＆＃34;：visible＆＃34;选择器：

$('.rocksZoom_textBox_btnUp').on('mouseenter', function(){
    if ($('.rocksZoom_textContainer:visible').scrollTop() === 0){ return; }
    // 
});

......然后是剩余功能的相同原则。

注意：可见是一个伪选择器，所以如果您有很多这样的选择，如果您切换一个类或属性来指示哪些rocksZoom_textContainer可见，那么您的表现可能会更好。

然后您只需将代码更改为以下内容：

$('.rocksZoom_textBox_btnUp').on('mouseenter', function(){
    if ($('.active_textContainer').scrollTop() === 0){ return; }
    // 
});

...如果active_textContainer是您用来表示当前有效/可见的类。

看一下这篇文章：Performance of jquery visible

多个可滚动的div，一个功能上/下按钮

1 个答案: