как скрыть li когда кликаешь на гиперссылку внутри него с помощью jQuery? - PullRequest
Новая
       3

как скрыть li когда кликаешь на гиперссылку внутри него с помощью jQuery?

0 голосов
/ 17 февраля 2012

Я пытаюсь скрыть элемент списка li при нажатии на ссылку внутри i.s 

<ul>
<li id="list_1" class="list"><a href="http://">hide</a>
</li>

<li id="list_2" class="list"><a href="http://">hide</a></li>

<li id="list_3" class="list"><a href="http://">hide</a></li>

<li id="list_4" class="list"><a href="http://">hide</a></li>
</ul>

<span class="updateNumber">0</span>​

и каждый раз, когда элемент li скрыт, увеличивается количество текста updateNumber на 1. спасибо

1 Ответ

5 голосов
/ 17 февраля 2012

Это должно сработать: 

$('li a').on('click', function(e) {
    e.preventDefault();

    $(this).parent().hide();
});

Селектор li a находит все теги <a> внутри любого <li> (здесь я сохранил это просто, поэтому он будет жадным). Затем мы используем $.on() для привязки обработчика события к событию click.

Теперь мы используем анонимную функцию (функцию без имени) для выполнения наших действий. Здесь мы передаем e в функцию в качестве аргумента. e содержит объект события, поэтому мы можем сделать e.preventDefault() на следующей строке. Эта строка останавливает браузер, выполняющий поведение по умолчанию для ссылки, которая заключается в переходе к URL-адресу в атрибуте href в теге <a>.

Важной является строка $(this).parent().hide(). Здесь $(this) ссылается на ссылку, по которой щелкнули, поэтому $(this).parent() мы можем получить доступ к родительскому узлу (тегу) <a>, который в данном случае является <li>. Добавление .hide() в конец скрывает <li>, и все готово.

Чтобы обновить .updateNumber span, добавьте этот код в функцию обработчика кликов: 

var currentNumber = parseInt($('.updateNumber').text());

currentNumber++;

$('.updateNumber').text(currentNumber);

Первая строка получает целое число из текста в пределах вашего диапазона и присваивает его переменной с именем currentNumber. parseInt() попытается превратить все, что находится внутри диапазона, в целое число.

Вторая строка currentNumber++; берет текущее значение, полученное нами из диапазона, и увеличивает его на один (++) бит.

Затем мы хотим заменить текст, отображаемый в промежутке, новым, обновленным значением, поэтому мы возвращаем новое значение в промежуток, снова используя $.text(): 

$('.updateNumber').text(currentNumber);

Обратите внимание, что использование $.text() без передачи ему строки будет извлекать текст элемента, тогда как предоставление $.text() с аргументом, таким как "Hello world, I'm a string", поместит эту строку в целевой элемент.

Здесь - это рабочее демо, с гордостью созданное и спонсируемое @Reigel из комментариев.

...