javascript - 重复的 JavaScript (jQuery) 代码

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选择器:

Description: Selects elements that have the specified attribute with a value beginning exactly with a given string.

$('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();
});