用Javascript填充数据以折叠

Posted 2023-05-09

【中文标题】用Javascript填充数据以折叠

【英文标题】：fill data to collapse with Javascript

【发布时间】：2020-04-19 19:46:08

【问题描述】：

我有一个按钮。我想当我点击这个按钮填充数据时，用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); 
    )
); 

【问题讨论】：

可以显示html代码吗？

【参考方案1】：

因为你试图从e.relatedTarget获取note-id并且它没有被定义，你可以这样获取按钮数据：

$("#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>

更新：如果你想通过collapse 获得note-id，你可以使用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>

【参考方案2】：

你也可以像这样找到data-note-id属性的value。

$(document).on("show.bs.collapse", "#collapse_CommentPopup", function(e) 
  var noteId = $('[data-target="#'+e.currentTarget.id+'"]').data("note-id");
  console.log(noteId);
);

<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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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-outline-secondary 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>