javascript - 使用 Javascript 填充数据以折叠

Question

我有一个按钮。我想当我单击此按钮时填充数据，并使用 JavaScript 添加此折叠，但事实并非如此。

当我单击按钮时，折叠起作用，这里没有问题，但数据未上传以使用 javascript 折叠

我的按钮:

<button data-toggle="collapse" data-target="#collapse_CommentPopup" data-note-id="@say_note.ID" class="btn btn-sm">Comments</button>

我的崩溃:

@BootstrapLinkOrButton.collapsePopUp(id: "collapse_CommentPopup", title: "Yorumlar")  @*data-target,Herhangi bir title*@

@helper collapsePopUp(string id = "collapse_CommentPopup", string title = "Modal Title", bool showCloseButton = true)
{
    <div class="collapse fade" id="@id" name="@id" tabindex="-1" role="dialog" aria-labelledby="@(id+"_labelPopup")">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body modalWrap" id="@(id+"_bodyPopup")">
                    "Default value"
                </div>
            </div>
        </div>
    </div> 

JavaScript:

    $("#collapse_CommentPopup").on('show.bs.collapse', function (e) {

        var btn = $(e.relatedTarget);
        noteId = btn.data("note-id"); 

        $("#collapse_CommentPopup_bodyPopup").load("/Comment/ShowNoteComments/" + noteId); 
    })
}); 

Answer 1

因为您正在尝试获取 note-id来自e.relatedTarget并且它没有定义，你可以这样获取按钮数据:

$("#collapse_CommentPopup").on('show.bs.collapse', function(e) {
  var btn = $('button[data-target="#' + e.target.id + '"]');
  noteId = btn.data("note-id");
  alert(noteId)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<button data-toggle="collapse" data-target="#collapse_CommentPopup" data-note-id="1" class="btn btn-sm">Comments</button>

<div class="collapse fade" id="collapse_CommentPopup" name="collapse_CommentPopup" tabindex="-1" role="dialog" aria-labelledby="@(id+" _labelPopup ")">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body modalWrap" id="@(id+" _bodyPopup ")">
        "Default value"
      </div>
    </div>
  </div>
</div>

更新:如果您想获得 note-id刚刚通过collapse您可以使用 e.delegateTarget 尝试此操作:

$("#collapse_CommentPopup").on('show.bs.collapse', function(e) {

  alert(e.delegateTarget.previousElementSibling.dataset.noteId);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<button data-toggle="collapse" data-target="#collapse_CommentPopup" data-note-id="1" class="btn btn-sm">Comments</button>

<div class="collapse fade" id="collapse_CommentPopup" name="collapse_CommentPopup" tabindex="-1" role="dialog" aria-labelledby="@(id+" _labelPopup ")">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body modalWrap" id="@(id+" _bodyPopup ")">
        "Default value"
      </div>
    </div>
  </div>
</div>