Question

我想要做的是当我的函数用户将鼠标悬停在.yell-button上时，然后.yell-box-txt将消失。

唯一的问题是我在网站上有多个按钮，每当我将鼠标悬停在其中一个按钮上时，所有文本字段都会消失。

这是我的功能：

$('.yell-button').hover(function(){

     $('.yell-box-txt').remove()

})

提前感谢您的帮助

Answer 1

在不知道您的标记的情况下，我怀疑您的.yell-box-txt与您的.yell-button位于同一个区块中。所以对于这样的标记：

<div>
    <a class="yell-button">text button</a>
    <span class="yell-box-txt">text</a>
</div>

你想要使用这样的东西：

$('.yell-button').hover(function() {
    $(this).closest('div').find('.yell-box-txt').remove();
});

Answer 2

根据定义，类可能是多个元素的访问器。如果您想独立访问此元素，请考虑使用ID并通过$('#idname')

访问它

Answer 3

$('.yell-button:first').hover(function(){
     $('.yell-box-txt').remove();
})

当然最好确保只使用一次这个课程。使用ID会更好，这应该是唯一的（当然这取决于你，你必须检查你的代码是否存在不一致，例如具有相同id的多个元素）

Answer 4

使用id和类

的示例

JS

    $('.yell-button').hover(function(){
     $('#box2.yell-box-txt').remove()
    })

HTML

  <div id ="box1" class="yell-box-txt">Text in box 1</div>
  <div id ="box2" class="yell-box-txt">Text in box 2</div>
  <div id ="box3" class="yell-box-txt">Text in box 3</div>

Answer 5

正如其他人所说，如果不了解你的标记，很难帮助你，但是根据你的标记，这里有一些方法可以做到：

理想情况，您可以为每个按钮和关联的文本框分配一个唯一标识符，例如yell-button-1，并在悬停时删除关联的yell-box-txt-1。

但是，这种方法可能很难实现，因为您需要从按钮中检索ID＃。

第二种方法是使用jQuery遍历。找到文本框相对于按钮的位置，并使用parent()，siblings()等方法从按钮导航到文本框。要确保只收到一个元素，请追加{{ 1}}到你的:first班。

有关jQuery Traversing的更多信息。

希望这有帮助！

用jQuery影响单个元素

5 个答案: