根据按钮单击更改模态的href

Question

单击此按钮可打开模态

<button type="button" id ="soldBtn" class="btn btn-info" data-toggle="modal" data-target="#myModal">This laptop has been sold</button>

这是模式

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <p>Confirmation</p>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to do this?</p>
        </div>
        <div class="modal-footer">
          <a class="btn btn-outline-success" id="confirmBtn" href="#" >Yes</a>
            <a class="btn btn-outline-danger" id="cancelBtn" data-dismiss="modal">No</a>
        </div>
      </div>
    </div>
  </div>
</div>

我可以为不同的按钮设置不同的模态，但我宁愿遵循DRY原则。 我希望confirmBtn的href根据点击打开模态的按钮进行更改。 到目前为止我已经尝试过这个但是我甚至不确定我是否在正确的轨道上。

<script type="text/javascript">
  if(jQuery('#soldBtn').data('clicked')) {
    document.getElementById("confirmBtn").href="{%url 'laptops:sale'%}";
}
</script>

Answer 1

您应该先等待DOM加载。 这可以通过使用以下内容包装脚本代码来完成：

$(function(){
    // Here you will place the code that follows
});

然后，您应该在id为soldBtn的DOM元素上为click事件注册一个事件处理程序：

$("#soldBtn").on('click', function(){
    var confirmBtnEle = $("#confirmBtn");
    confirmBtnEle.attr('href','%url 'laptops:sale'%');
});

显然，您必须将我们传递给上面的attr方法的第二个参数更改为您想要的。