如何为不同的类创建jquery单个mouseenter()事件

时间:2017-12-11 11:51:41

标签: jquery mouseenter

您好我正在尝试将一系列mouseenter事件分组到一个但我真的很新的javascript并且真的很困惑我想创建一个事件来包含它们。“。slider-button-1”类计为5现在。

$("#slider-s-pic .slider-button-1").mouseenter(function () {
    $(".slider-inner ul").animate({ marginLeft: "-" + (liWidth * 0) + "px" });
});

我的整个项目都在codepen中 - > codepen.io/FreeMaNn/pen/ZagweX

3 个答案:

答案 0 :(得分:0)

您的选择器将以逗号(,)分隔。试试吧

$("#slider-s-pic , .slider-button-1").mouseenter(function () {
    $(".slider-inner ul").animate({ marginLeft: "-" + (liWidth * 0) + "px" });
});

答案 1 :(得分:0)

你可以使用像

这样的东西
$("#slider-s-pic a[class^='slider-button-']").mouseenter(function () {
    var GetIndex = $(this).closest('li').index();
    $(".slider-inner ul").animate({ 
       marginLeft: "-" + (liWidth * GetIndex) + "px" 
     });
});

a[class^='slider-button-'] - 选择以slider-button-

开头的所有课程

^ - 从...开始 * - 包含 $ - 以

结尾

var GetIndex = $(this).closest('li').index(); - 获取li索引..不要使用$(this).index()每次都会返回0 ..所以你需要使用.closest('li')

答案 2 :(得分:0)

试试吧。它会起作用。

$(document).on( 'mouseenter', '#slider-s-pic , .slider-button-1',(function () {
    $(".slider-inner ul").animate({ marginLeft: "-" + (liWidth * 0) + "px" });
});