所以我有一張卡片，用戶在 textarea 中的文本然后單擊一個按鈕使其消失并顯示為卡片標題 div 但它不會注冊任何輸入。
該卡將重復多次，因此我需要使事件偵聽器能夠區分不同的卡。
我嘗試過的是下面的 jquery 和一些像這樣的 javascript：
let questionHeaderInput = document.querySelectorAll(".questionMainTextArea");
let questionHeader = document.querySelectorAll(".card-title");
questionHeaderInput.forEach(item => {
questionHeader.innerHTML = item.value;
});
$(".questionMainTextArea").on("change paste keyup input", function() {
$(this).closest(".card-title").innerHTML = $(this).val();
});<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body">
<div class="questionMainTextAreaContent">
<div class="questionMainTextAreaContentArea">
<textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
</div>
</div>
<div class="card-title questionHeader"></div>
</div>
</div>uj5u.com熱心網友回復：
您可以通過首先定位最接近的.card-body然后 find來嘗試 jQuery 版本.card-title。你不能innerHTML在 jQuery 參考的物件上使用，你應該使用.text(). 此外，附加事件就input足夠了。
演示：
$(".questionMainTextArea").on("input", function() {
$(this).closest(".card-body").find(".card-title").text($(this).val());
});<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body">
<div class="questionMainTextAreaContent">
<div class="questionMainTextAreaContentArea">
<textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
</div>
</div>
<div class="card-title questionHeader"></div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/334612.html
標籤：javascript html 查询