2

这是我正在做的简单的事情。我有一些 div，每个名为“.item-1”、“.item-2”等。当用户将鼠标悬停在“.item-1”上时，“#city-info-1”div 向上滑动，而它当用户悬停时向下滑动。我足够了解这样做，并且足够了解我的编码方式并不是最好的方式。只是好奇其他人会如何做到这一点，所以我不必每次都重复几乎相同的代码。感谢任何建议:)

    $('#city-info-1, #city-info-2, #city-info-3, #city-info-4, #city-info-5, #city-info-6, #city-info-7').hide();

    $('.item-1').hover(function() {
        $('#city-info-1').stop().slideToggle(400);
    }, function() {
        $('#city-info-1').hide();
    });

    $('.item-2').hover(function() {
        $('#city-info-2').stop().slideToggle(400);
    }, function() {
        $('#city-info-2').hide();
    });

    $('.item-3').hover(function() {
        $('#city-info-3').stop().slideToggle(400);
    }, function() {
        $('#city-info-3').hide();
    });

    $('.item-4').hover(function() {
        $('#city-info-4').stop().slideToggle(400);
    }, function() {
        $('#city-info-4').hide();
    });

    $('.item-5').hover(function() {
        $('#city-info-5').stop().slideToggle(400);
    }, function() {
        $('#city-info-5').hide();
    });

    $('.item-6').hover(function() {
        $('#city-info-6').stop().slideToggle(400);
    }, function() {
        $('#city-info-6').hide();
    });

    $('.item-7').hover(function() {
        $('#city-info-7').stop().slideToggle(400);
    }, function() {
        $('#city-info-7').hide();
    });
4

4 回答 4

2

根据您当前的标记，您可以使用start with选择器：

描述：选择具有指定属性的元素，其值恰好以给定字符串开头。

$('div[id^=city-info]').hide();

$('div[class^=item]').hover(function() {
      var cls = $(this).attr('class').replace('item', "")
      $('#city-info' + cls).stop().slideToggle(400);
  }, function() {
      $('#city-info' + cls).hide();
});
于 2012-07-13T22:11:52.147 回答
1

为每个项目设置一个唯一的 ID（只有一些前缀和整数，即“i-666”），并为所有项目设置相同的类。

$('.item').hover(function() {
  var item_id = item.attr('id');
  $('#city-info-' + item_id).stop().slideToggle(400);
}, function() {
  $('#city-info-' + item_id).hide();
});
于 2012-07-13T22:16:20.050 回答
0

使用通用 css 类并将行为附加到它而不是特定元素。

例子：

http://jsfiddle.net/K3mbE/1/

Javascript：

$('.slider').hover(function() {
  $(this).find('div').stop().slideToggle(400);
}, function() {
  $(this).find('div').hide();
});

HTML：

<div class="slider">Seattle
    <div>It rains a lot</div>
</div>
<div class="slider">New York
    <div>Greatest city on earth</div>
</div>
<div class="slider">Trantor
    <div>Greatest city in the galexy</div>
</div> 

  ​</p>

于 2012-07-13T22:11:19.767 回答
0

一个 div 可以有多个类，所以你可以让每个 div 有一个共同的类名

<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
...

所以你可以选择：

$('.item').hover(function() {
        ...
    }, function() {
       ....
    });

请向我们展示您的 html，因为这看起来像是您可以简单地使用 css 做的事情

于 2012-07-13T22:12:45.107 回答