0

I have multiple text div containers (same class: .rocksZoom_textContainer) which I control via up/down scroll buttons. These containers are never visible together - there's a show()/hide() between them.

The code for the buttons is as follows:

$('.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();
});

The jQuery code for the show()/hide():

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

The 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>

How can I reuse the buttons functions to work on all text containers independently?

Pedro

4

1 回答 1

1

由于一次只有 1 个 rocksZoom_textContainer 可见，您可以使用 ":visible" 选择器：

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

...然后其余功能的原理相同。

注意:visible 是一个伪选择器，所以如果你有很多这些，如果你切换一个类或属性来指示哪个rocksZoom_textContainer 是可见的，你的性能可能会更好。

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

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

...如果 active_textContainer 是您用来指示当前活动/可见的类。

看看这篇文章：jquery 的性能可见

于 2013-06-13T16:49:18.367 回答