使用Jquery设置CSS边框颜色无效问题求助

问题描述 #

正在学习jQuery，尝试通过点击段落元素为页面中的图片设置蓝色CSS边框，但该设置始终未生效。查阅了大量教程仍无法解决，网页结构较为基础，运行时无报错信息，调整边框尺寸后仍无变化。

问题分析 #

查看代码后发现几个核心问题：

• 事件绑定嵌套错误：外层p点击事件内部又嵌套了$(document).ready()和新的p点击事件，第一次点击段落时仅完成了新的点击事件绑定，不会执行设置边框的逻辑；只有第二次点击段落才会触发边框设置，和预期的一次点击生效不符。
• jQuery版本过于陈旧：使用的是1.2.6版本，虽基础css()方法在该版本支持，但老版本可能存在兼容性问题，且缺乏后续版本的特性与bug修复。
• HTML结构存在冗余标签：<nav>标签后多了一个无对应开启标签的</div>，虽不直接影响功能，但会导致DOM结构混乱。

修复后的代码 #

JavaScript #

$(document).ready(function() {
  // 仅绑定一次p标签的点击事件
  $("p").click(function() {
    $('img').css("border", "20px solid blue");
  });
});

CSS #

body {
  margin: 0;
}

nav {
  text-align: center;
}

nav ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: aquamarine;
  color: burlywood;
  overflow: hidden;
}

nav a {
  text-decoration: none;
  padding: 15px;
  display: inline-block;
}

nav li {
  display: inline;
}

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="about">About</a></li>
      <li><a href="contact us">contact us</a></li>
      <li><a href="home">home</a></li>
      <li><a href="news">news</a></li>
    </ul>
  </nav>
  <p>this is a paragraph</p>
  <img src="https://picsum.photos/seed/picsum/200/300">
  <p><a href="https://www.w3schools.com/tags/att_img_src.asp">w3schools</a></p>
  <p>hello this is random text.</p>
  <input type="text" id="text"><br><br>
  <!-- 升级到较新的稳定版本jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</body>
</html>

总结 #

1. 移除嵌套的事件绑定逻辑，确保点击事件仅绑定一次，点击段落即可直接触发边框设置。
2. 将jQuery版本升级到3.7.1（当前稳定版本），避免老版本可能带来的问题。
3. 清理HTML中的冗余闭合标签，保证DOM结构的正确性。

内容的提问来源于stack exchange，提问作者akashi