Question

我有一系列徽章......

[<div class="badge"></div>, <div class="badge"></div>, <div class="badge"></div>]

和一系列箭头......

[<div class="arrow"></div>, <div class="arrow"></div>, <div class="arrow"></div>]

当我将鼠标悬停在徽章上时，我试图让箭头显示，所以我有类似的东西

$('.badge').hover(function() {
    $('.arrow').show();
}, function() {
    $('.arrow').hide();
});

我试图将每个徽章和箭头分开以独立悬停，但我似乎无法用$（＆＃39; .badge＆＃39;）来隔离它。第一个（）或$ （＆＃39; .arrow＆＃39;）[0]

这是此website的预期结果，但我希望这样做，而不必使用诸如badge1，badge2，badge3和arrow1，arrow2，arrow3等许多特定类。

HTML

<div class="badge badge1 margin_right">  
    <div class="arrow arrow1 right" style="display: none;"></div>
    <img src="images/logo-bc.png" alt="basecamp"/>
    <h3><a href="#">Basecamp</a><span>®</span></h3>
    <h4>Manage Projects</h4>
    <p>Used by millions for project management.</p>
</div>

Answer 1

在您的情况下，arrow是badge元素的后代，因此当您悬停时，您需要更改arrow内badge的显示徽章。

所以

$('.badge').hover(function () {
    $(this).find('.arrow').show();
}, function () {
    $(this).find('.arrow').hide();
});

Answer 2

这可能会对您有所帮助 -

$.each([arr1, arr2], function() {
$.each(this, function(i, v) {
    // do something
});
});

迭代遍历数组jquery

2 个答案: