jquery - 影响错误元素的jQuery事件

Question

http://s199881165.onlinehome.us/transfem/sortable%20test/sortable2.php

因此，我正在开发一个视频网站 UI，该 UI 具有链接到某些视频的可拖动/可放置/可排序（jquery）图块。正如您所看到的，当您将鼠标悬停在它们上面时，它们都会发疯......

应该发生什么——以及我试图编写的代码——是鼠标悬停在一个框上以触发一个该图块（div）的添加/删除类。

有人有想法么？

Answer 1

主要原因是您将script标签作为#sortable1. 因此，您的$( "#sortable1 li:nth-child(1)" )选择器没有产生预期的结果

一种可能的解决方案是尝试

$( "#sortable1 li:eq(1)" )

作为更好的解决方案，我建议你使用类似的东西

$(function() {
    $( "#sortable1 > li").hover(function(){
        $(this).next().children('div').removeClass( "boxxySTILL", 200, "linear" ).addClass( "boxxy", 200, "linear" );
    }, function(){
        $(this).next().children('div').removeClass( "boxxy", 200, "linear" ).addClass( "boxxySTILL", 200, "linear" );
    });
});

li而不是像这样为每个注册处理程序

  $(function() {
  $( "#sortable1 li:nth-child(1)" ).mouseenter(function() {

  $( "#theone1" ).removeClass( "boxxySTILL", 200, "linear" ).addClass( "boxxy", 200, "linear" );

});

  $(function() {
  $( "#sortable1 li:nth-child(1)" ).mouseleave(function() {

    $( "#theone1"  ).removeClass( "boxxy", 200, "linear" ).addClass( "boxxySTILL", 200, "linear" );

}); 

  });
});

Answer 2

好的，所以我在演示中所做的是将类添加box到您要显示的每个 div 中。它使您可以将 JavaScript 清理为：

HTML：

<div id="timeline">
    <ul id="sortable1" class="connectedSortable">
        <li class="ui-state-default" id="thelistitemyo"><div id="theone1" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/435/247/435247991_640.jpg);" width="100%"></div><span class="spannin">Demo 4</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id    ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone2" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/343/179/343179766_640.jpg);" width="100%"></div><span class="spannin">Mixtape 3sec</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id  ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone3" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/398/394/398394157_640.jpg);" width="100%"></div><span class="spannin">begun - san francisco</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id     ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone4" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/435/248/435248805_640.jpg);" width="100%"></div><span class="spannin">Demo 5</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id    ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone5" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/424/127/424127918_640.jpg);" width="100%"></div><span class="spannin">3 Second Video</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id    ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone6" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/343/179/343179766_640.jpg);" width="100%"></div><span class="spannin">Mixtape 3sec</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id  ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone7" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/334/173/334173957_640.jpg);" width="100%"></div><span class="spannin">Down - Time Lapse - 3sec</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id  ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone8" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/343/179/343179766_640.jpg);" width="100%"></div><span class="spannin">Mixtape 3sec</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id  ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone9" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/370/039/370039831_640.jpg);" width="100%"></div><span class="spannin">Bravo TV 3sec</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id     ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>
    </ul>
</div>

JavaScript：

$(function()
{
    $( "#sortable1, #sortable2" ).sortable(
    {
        connectWith: ".connectedSortable"
    }).disableSelection();

    $('#sortable1 li').mouseenter(function()
    {
        $(this).find('.box').removeClass('boxxySTILL', 200, 'linear')
                            .addClass('boxxy', 200, 'linear');
    });

    $('#sortable1 li').mouseleave(function()
    {
        $(this).find('.box').removeClass('boxxy', 200, 'linear')
                            .addClass('boxxySTILL', 200, 'linear');
    });
});