javascript - JQuery 关闭按钮事件处理程序

<分区>

我有五个 buttons 和 bootstrap close ，我将 onclick 事件处理程序添加到 alert() next sibiling文本。问题是它仅在第一个关闭按钮上显示 alert()。

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

我是 JQuery 的新手，让我知道我在这里缺少什么？

谢谢

最佳答案

这是因为您使用的是唯一 ID，所以 jQuery 会在它找到的第一个 ID 处停止。继续并更改您的代码以使用一个类，它会起作用。您已经为每个添加了一个 close 类，因此只需将其更改为以下内容即可。

附带说明一下，您的 jsFiddle 中有几个额外的结束 div 标记。

解决方案

$(".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>

文档

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

关于javascript - JQuery 关闭按钮事件处理程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53686929/

上一篇：Javascript fisher-yates 帮助

下一篇：javascript - 在中间件中调度 redux 操作会导致意外行为

javascript - 使用 Javascript setTimeout 调用 MVC 操作以保持表单例份验证事件

jquery - 使用 <ul><li> 而不是 <select> 进行导航/过滤

javascript - 解析 AJAX 响应

javascript - 使用 jQuery 获取表中的列 id

javascript - 如何检查与显示相关的文本内容 :none style

javascript - 数据表标签搜索

javascript - Angular 路线不会加载 templateUrl

javascript - 如何在 Action 完成之前显示加载图像 ASP.Net MVC 5

javascript - 使用 JQuery 延迟加载 div，代码在 Chrome 中不起作用(window.onload)