如何通过点击事件将div的data-url属性动态插入到load函数中？

没问题，这就帮你实现这个需求，以下是完整的解决方案和细节说明：

需求回顾 #

实现点击触发时，将带有data-url属性的div中的属性值动态插入到jQuery的load函数中，且URL中的关键词需用短横线“-”连接。

完整代码实现 #

HTML 结构

<!-- 触发点击的元素，带有需要格式化的data-url属性 -->
<div class="link" data-url="some keywords needed"></div>
<!-- 用于加载内容的目标容器 -->
<div id="data"></div>

<!-- 引入jQuery脚本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JavaScript 逻辑

$(".link").click(function() { 
  // 1. 获取当前元素的data-url值，并将空格（非单词字符）替换为短横线
  var formattedPath = $(this).attr('data-url').replace(/\W/g, '-');
  // 2. 拼接完整的请求URL
  var fullUrl = "https://website.com/data/" + formattedPath;
  // 3. 调用load方法加载目标内容，同时在回调中打印URL用于调试
  $("#data").load(fullUrl + " .content", function() { 
    console.log("加载的URL：", fullUrl); 
  }); 
}); 

关键细节说明 #

• 动态获取属性值：使用$(this)在点击事件中精准获取当前触发点击的.link元素，避免影响其他同类型元素
• URL格式化：正则表达式/\W/g会匹配所有非单词字符（包括空格、标点等），用-替换后就能把空格分隔的关键词转为短横线连接的格式，符合URL规范
• load函数调用：拼接好完整URL后，加上目标选择器.content，可以只加载目标页面中指定类名的内容，提升加载效率

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