如何在Modal的href中获取并使用data-id的值？

我来帮你搞定这个问题，你现在的问题主要出在两个地方：获取data-id的方式不对，以及更新a标签href的方法用错了，咱们一步步来修正：

问题分析 #

1. data-id获取错误：你用$(this).data('data-id')是错的，jQuery的data()方法会自动识别data-前缀的属性，所以直接写id就行，也就是$(this).data('id')。
2. 更新href的方法错误：val()方法是用来设置表单元素（比如input、select）的value值的，a标签没有value属性，所以要使用attr()或者prop()来修改它的href属性。

修正后的代码 #

首先是HTML部分（保持你的原有结构，仅确保触发按钮的data-id属性逻辑正确）：

<a class="pdfId btn btn-success" data-id='+arrayData[j].value+' data-toggle="modal" data-target="#myModal">Poland</a>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Select Language</h4>
      </div>
      <div class="modal-body">
        <!-- 先保留空href，后续通过JS拼接完整路径 -->
        <a class="pdfId1 btn btn-success" href="">ENGLISH</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

然后是修正后的JavaScript代码：

$(document).on("click", ".pdfId", function () {
  // 正确获取触发元素的data-id值
  var myBookId = $(this).data('id');
  console.log(myBookId);
  
  // 拼接完整的URL，替换为你的实际base_url路径
  var newHref = "<?php echo base_url()?>responsible/poland_pdf/" + myBookId;
  
  // 用attr()方法更新Modal内a标签的href属性
  $(".modal-body .pdfId1").attr('href', newHref);
});

额外优化建议 #

如果你的Modal是动态生成的（比如通过AJAX加载），你现在用$(document).on()的事件委托写法是正确的，能确保动态元素的事件绑定生效。另外，如果你想在Modal关闭后重置href，避免下次打开时复用旧ID，可以监听Modal的关闭事件：

$('#myModal').on('hidden.bs.modal', function () {
  $(".modal-body .pdfId1").attr('href', '');
});

这样就能完美实现点击触发按钮后，把对应的data-id值注入到Modal内的链接中了！

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