Question

这是我正在做的简单事情。我有一些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();
    });

Answer 1

根据您当前的标记，您可以使用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();
});

Answer 2

为每个项目设置一个唯一的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();
});

Answer 3

使用通用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>

Answer 4

一个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

做的事情

重复JavaScript（jQuery）代码

4 个答案: