javascript - 根据按钮单击更改模态的 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 元素上的点击事件注册一个事件处理程序:

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

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