Влияние на один элемент с помощью jQuery

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

Как уже говорили другие, без представления о вашей разметке вам трудно помочь, однако вот несколько способов сделать это, в зависимости от вашей разметки:

В идеале , вы сможете назначить каждой кнопке и соответствующему текстовому полю уникальный идентификатор, такой как yell-button-1, и заставить его удалить связанный yell-box-txt-1 при наведении курсора.

Однако этот метод может быть «сложным» для реализации, потому что вам нужно получить ID # с кнопки.

Второй способ сделать это - использовать обход jQuery. Найдите расположение текстового поля по отношению к кнопке и перейдите от кнопки к текстовому полю, используя такие методы, как parent(), siblings() и т. Д. Чтобы убедиться, что вы получаете только один элемент, добавьте :first к вашему .yell-box-txt класс.

Подробнее о jQuery Traversing .

Надеюсь, это поможет!

Answer 3

Пример использования идентификатора и класса

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 4

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

Конечно, лучше использовать этот класс только один раз. Вместо этого было бы лучше использовать идентификатор, который должен быть уникальным (конечно, это зависит от вас, и вы должны проверить свой код на наличие несоответствий, таких как наличие нескольких элементов с одинаковым идентификатором)

Answer 5

Классы по определению являются аксессорами для нескольких элементов. Если вы хотите получить доступ к этому элементу самостоятельно, рассмотрите возможность использования идентификатора и доступа к нему через $('#idname')