时间戳

首页 > 解决方案 > Bootstrap手风琴内的元素值不验证为空

html - Bootstrap手风琴内的元素值不验证为空

问题描述

我有一些通过循环动态生成的卡片。在一部分中，我有一个由按钮触发的手风琴元素（Bootstrap 方法）。当元素accordion-body（contenteditable true）在失去焦点后在其中具有价值时，我更改了该按钮的背景颜色。问题是，如果手风琴正文为空，我想删除按钮颜色，但即使用户删除所有内容，在失去焦点后元素手风琴正文似乎仍然有一个值。

这是手风琴代码：

为什么 $(this).val() 永远不会评估为空？我在 if 语句中有一条控制台消息，它永远不会进入 else 验证。

$('.accordion-body').on('focusout', function() {
  var style = $(this).closest('.accordion-item').find('button[id=infobtn]').attr('style');

  //it will return string
  style += ';background-color: #f4cccc;';

  if ($(this).val() != '') {
    $(this).closest('.accordion-item').find('button[id=infobtn]').attr('style', style);
  } else {
    $(this).closest('.accordion-item').find('button[id=infobtn]').attr('style');
  }
});
<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<span class="mySpan">

<div class="accordion accordion-flush py-0" id="accordionFlushExampleOne">
  <div class="accordion-item py-0">
    <h2 class="accordion-header" id="flush-headingOne">
      <button class="accordion-button collapsed" id="infobtn" name="infobtn" style="height:25px; <?php if (!empty($additionalInfo)) echo " background-color: #f4cccc; " ?>" type="btn btn-sm" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne>" aria-expanded="false"
        aria-controls="flush-collapseOne">Additional Info
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExampleOne">
      <div class="accordion-body fw-bold" id="additionalInfo" name="additionalInfo" contenteditable="true">
        <?php echo "$additionalInfo" ?>
      </div>
    </div>
  </div>
</div>
</span>

标签： htmljquery

解决方案

赋予 HTML块元素该属性contenteditable="true"负责该行为。

在浏览器中删除此类元素的内容，将在<br>其中设置替换。

因此，if ($(this).val() != '')永远不会是真的，因为你的包含元素永远不会是空的。

将包含更改为div内联元素，例如span修复问题，您的条件逻辑将开始工作。

HTML -<div>交换<span>

<span class="accordion-body fw-bold" id="additionalInfo" name="additionalInfo" contenteditable="true">
  <?php echo "$additionalInfo" ?>
</span>

HTML & JQuery - 内部<span>保留<div>引导手风琴设计

<div class="accordion-body fw-bold" id="additionalInfo" name="additionalInfo" contenteditable="true">
  <span contenteditable="true">
    <?php echo "$additionalInfo" ?>
  </span>
</div>

$('.accordion-body span').on('focusout', function() {...

推荐阅读