Question

我是一个jquery菜鸟 - 使用easyslider 1.7 - 按钮在滑块上 - 所以效果混淆了jQuery ...现在使用简单的show / hide并且工作正常！

如果可能的话，我想改进以下的内侧代码，以便更加雄辩。

我希望按钮在滑块div上悬停时淡入淡出/淡出，并在悬停在按钮上方时保持可见（这些按钮漂浮在滑块div上）。抱歉，无法发布HTML。

$('#prevBtn,#nextBtn').hide();
$("#slider").hover(
  function () {
    $('#prevBtn,#nextBtn').show();
  },
  function () {
    $('#prevBtn,#nextBtn').hide();
  }
);
$("#prevBtn").hover(
  function () {
    $('#prevBtn,#nextBtn').show();
  },
  function () {
    $('#prevBtn,#nextBtn').hide();
  }
);
$("#nextBtn").hover(
  function () {
    $('#prevBtn,#nextBtn').show();
  },
  function () {
    $('#prevBtn,#nextBtn').hide();
  }
);

Answer 1

利用变量存储重用对象，并使用CSS分组选择器。

var buttons = jQuery('#prevBtn,#nextBtn');
var hide = function () { buttons.hide(); }
var show = function () { buttons.show(); }
jQuery("#slider, #prevBtn, #nextBtn").hover(show, hide);

改进这个jQuery？

1 个答案: