代码之家 › 专栏 › 技术社区 › Arbazz Hussain

jquery关闭按钮事件处理程序[重复]

jquery javascript

Arbazz Hussain · 技术社区 · 7 年前

这个问题已经有了答案:

我有五个 buttons 用引导程序 close ,我补充说 onclick 事件处理程序到 alert() 下一个sibiling文本。问题是它显示了 警报() 仅在第一个关闭按钮上。

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

我是jquery的新手。让我知道我在这里遗漏了什么?

谢谢

1 回复 | 直到 7 年前

AnonymousSB 7 年前

这是因为您使用的是一个唯一的ID,所以jquery会在它找到的第一个ID处停止。继续修改代码以使用类,它就会工作。您已经添加了 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>

文档

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