javascript - 如何使用 jquery 获取 bootstrap collpase 中的文本？

Question

这是我的 html 和 jquery 代码：

$('.edit').click(function(){
      let x = $(this).parents().find('.info').children().find('dd.redirectUrl').text() ;
      console.log(x) ;
})

<div id="accordion">
 <div class="card">
   <div class="card-header bg-dark d-flex flex-row align-items-center p-2">

         <button class="btn btn-outline-light rounded-circle" data-toggle="collapse" data-target="#${pos+1}"><i class="fa fa-plus"></i></button>

         <div class="text-light text-center w-100 code">
         ${obj.code}
         </div>

         <button class="btn btn-outline-primary edit rounded-circle"><i class="fa fa-pencil"></i></button>


         <button class="btn btn-outline-danger rounded-circle"><i class="fa fa-trash"></i></button>

  </div>
  <div id="${pos+1}" class="collapse info">
    <dl class='m-3'>
         <dt>Shortened URL</dt>
         <dd>${window.location.origin+ '/' + obj.code}</dd>
         <dt>Redirection URL</dt>
         <dd class="redirectUrl">${obj.redirectUrl}</dd>
        </dl>
     </div>
  </div>
</div>

总共有 5 个手风琴，每个手风琴里面都有不同的数据div.info。当我单击button.fa-pencil特定手风琴的按钮时，我想注销div.redirectUrl该手风琴的文本。但是我的 jquery 代码正在注销空文本。

编辑：因为，我在一个数组中添加了这些手风琴，所以 iddiv.collapse.info将是 1,2..5（由于 pos+1）所以有什么方法可以注销点击div.info时的 idbutton.fa-trash吗？dd.redirectUrl此外，我已经更改了箭头功能，但它将所有文本作为单个单元注销。我只需要一个 Url 文本，它是button.fa-pencil被点击的手风琴的孩子。

标签： javascriptjqueryhtml

Answer 1

因为你使用箭头函数$('.edit').click(() => {所以this里面的点击函数不是.click元素。将其更改为$('.edit').click(function() {然后它将按预期工作。

$('.edit').click(function() {
      let target_id = $(this).data('id');
      let x = $('#' + target_id).find('dd.redirectUrl').text() ;
      console.log(x) ;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion">
 <div class="card">
   <div class="card-header bg-dark d-flex flex-row align-items-center p-2">
   
         <button class="btn btn-outline-light rounded-circle" data-toggle="collapse" data-target="#${pos+1}"><i class="fa fa-plus"></i></button>
         
         <div class="text-light text-center w-100 code">
         ${obj.code}
         </div>
         
         <button class="btn btn-outline-primary edit rounded-circle" data-id="pos1"><i class="fa fa-pencil"></i></button>
         
         
         <button class="btn btn-outline-danger rounded-circle"><i class="fa fa-trash"></i></button>
         
  </div>
  <div id="pos1" class="collapse info">
    <dl class='m-3'>
         <dt>Shortened URL</dt>
         <dd>${window.location.origin+ '/' + obj.code}</dd>
         <dt>Redirection URL</dt>
         <dd class="redirectUrl">${obj.redirectUrl}</dd>
        </dl>
     </div>
  </div>
  <div id="pos2" class="collapse info">
    <dl class='m-3'>
         <dt>Shortened URL</dt>
         <dd>${window.location.origin+ '/' + obj.code}</dd>
         <dt>Redirection URL</dt>
         <dd class="redirectUrl">${obj.redirectUrl}2</dd>
        </dl>
     </div>
  </div>
</div>