使用.addClass函数时，单击时不显示边框_删除单击按钮时显示的边框_单击时不显示jquery函数 - 腾讯云开发者社区

使用.addClass函数时，单击时不显示边框

在使用.addClass函数时，如果单击后不显示边框，可能是由于以下几个原因：

选择器问题：确保你使用的选择器正确地选中了你想要添加边框的元素。
CSS样式冲突：可能存在其他的CSS规则覆盖了你通过.addClass添加的边框样式。
JavaScript执行顺序：如果.addClass函数在DOM元素加载之前执行，那么它可能无法找到对应的元素。
JavaScript错误：可能存在JavaScript代码错误，导致.addClass函数没有被正确执行。

解决方法

1. 确保选择器正确

确保你使用的选择器能够准确地选中目标元素。例如：

$(document).ready(function() {
    $('button').click(function() {
        $(this).addClass('bordered');
    });
});

2. 检查CSS样式冲突

确保没有其他CSS规则覆盖了你添加的边框样式。例如：

.bordered {
    border: 2px solid red !important;
}

3. 确保DOM元素加载完成

确保.addClass函数在DOM元素加载完成后再执行。可以使用$(document).ready()来确保DOM加载完成后再绑定事件：

$(document).ready(function() {
    $('button').click(function() {
        $(this).addClass('bordered');
    });
});

4. 检查JavaScript错误

打开浏览器的开发者工具（通常按F12或右键选择“检查”），查看控制台是否有JavaScript错误。如果有错误，修复这些错误后再尝试。

示例代码

以下是一个完整的示例，展示了如何在单击按钮时添加边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Add Class Example </title>
    <style>
        .bordered {
            border: 2px solid red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button>Click me</button>

    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $(this).addClass('bordered');
            });
        });
    </script>
</body>
</html>