根據按鈕單擊更改模態的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方法的第二個參數更改為您想要的。