Обработчик событий кнопки закрытия JQuery

У меня есть пять buttons с загрузочным close, я добавил обработчик событий onclick в следующий родственный текст alert(). Проблема в том, что alert() отображается только на первой кнопке закрытия.

http://jsfiddle.net/4cz57mge/

<script>
    $("#closenotify").click(function(){
        alert($(this).next().text());
    });
</script>

Я новичок в JQuery, дайте мне знать, что мне здесь не хватает?

Спасибо

idДолжно быть уникальным. У вас не может быть более одного элемента с любым заданным значением id на всей странице. Измените id на class и $("#closenotify") на $(".closenotify").

— 08.12.2018 22:01

Спасибо, понял, использование class = "closenotify close" решает проблему.

— 08.12.2018 22:32

javascript jquery

08.12.2018 21:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

465

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это потому, что вы используете уникальный идентификатор, поэтому jQuery останавливается на первом найденном. Идите вперед и измените свой код, чтобы использовать класс, и он будет работать. Вы уже добавили класс close для каждого, поэтому просто измените его на следующий.

Кстати, у вас есть пара дополнительных закрывающих тегов div в вашем jsFiddle.

Решение

$(".close").click(function(){
    alert($(this).next().text());
});

Рабочая демонстрация

$(".close").click(function(){
    alert($(this).next().text());
});

.alert-purple { border-color: #694D9F;background: #694D9F;color: #fff; }
.alert-info-alt { border-color: #B4E1E4;background: #81c7e1;color: #fff; }
.alert-danger-alt { border-color: #B63E5A;background: #E26868;color: #fff; }
.alert-warning-alt { border-color: #F3F3EB;background: #E9CEAC;color: #fff; }
.alert-success-alt { border-color: #19B99A;background: #20A286;color: #fff; }
.glyphicon { margin-right:10px; }
.alert a {color: gold;}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "col-md-12">
    <div class = "alert alert-purple alert-dismissable">
        <span class = "glyphicon glyphicon-certificate"></span>
        <button type = "button" id = "closenotify" class = "close" data-dismiss = "alert" aria-hidden = "true">
            ×</button><strong>sagsagsagsagsag</strong> 
    </div>
        </div>

  <div class = "col-md-12">
    <div class = "alert alert-purple alert-dismissable">
        <span class = "glyphicon glyphicon-certificate"></span>
        <button type = "button" id = "closenotify" class = "close" data-dismiss = "alert" aria-hidden = "true">
            ×</button><strong>fdsggsdgsdgsdg</strong> 
    </div>
        </div>

  <div class = "col-md-12">
    <div class = "alert alert-purple alert-dismissable">
        <span class = "glyphicon glyphicon-certificate"></span>
        <button type = "button" id = "closenotify" class = "close" data-dismiss = "alert" aria-hidden = "true">
            ×</button><strong>sgaasgsagsaggasg</strong> 
    </div>
        </div>

  <div class = "col-md-12">
    <div class = "alert alert-purple alert-dismissable">
        <span class = "glyphicon glyphicon-certificate"></span>
        <button type = "button" id = "closenotify" class = "close" data-dismiss = "alert" aria-hidden = "true">
            ×</button><strong>This is a test nigga</strong> 
    </div>
        </div>

  <div class = "col-md-12">
    <div class = "alert alert-purple alert-dismissable">
        <span class = "glyphicon glyphicon-certificate"></span>
        <button type = "button" id = "closenotify" class = "close" data-dismiss = "alert" aria-hidden = "true">
            ×</button><strong>This is a test nigga</strong> 
    </div>
</div>