javascript - 模板文字无法与 Bootstrap 4 可折叠项目一起使用？

Question

我在 js 中构建了一个模板文字，并将其传递给可折叠项目。只有部分可折叠设备可以工作。知道为什么会这样吗？

//Generates a random number for div id
function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}


//Exhibitors
const qaList = [
  { 
    faqId: uuidv4(),
    question: "Item 1",
    answer: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  },
  { 
    faqId: uuidv4(),
    question: "Item 2",
    answer: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  },
  { 
    faqId: uuidv4(),
    question: "Item 3",
    answer: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  },
  { 
    faqId: uuidv4(),
    question: "Item 4",
    answer: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  },
  { 
    faqId: uuidv4(),
    question: "Item 5",
    answer: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  },
  { 
    faqId: uuidv4(),
    question: "Item 6",
    answer: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  }  
];


function qaTemplate(faq) {
  return `
  <div class="card">
    <div class="card-header" role="tab" id="headingOne1">
      <a data-toggle="collapse" data-parent="#accordionEx" href="#${faq.faqId}" aria-expanded="false" aria-controls="${faq.faqId}">
        <h5 class="mb-0">
          ${faq.question} <i class="fas fa-angle-down rotate-icon"></i>
        </h5>
      </a>
    </div>

    <div id="${faq.faqId}" class="collapse" role="tabpanel" aria-labelledby="headingOne1"
      data-parent="#accordionEx">
      <div class="card-body">
        ${faq.answer}
      </div>
    </div>

  </div>
  `
}

document.getElementById("accordionEx").innerHTML = `${qaList.map(qaTemplate).join(' ')};`

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-8 offset-md-2 mx-auto">
      <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true"></div>
    </div>
  </div>
</div>

Answer 1

您有 2 个问题。

1. 您的 uuid 生成器正在生成以数字开头的 ID。这不是有效的 html ID。我在 ID 前添加了 i- 前缀。

请参阅下面的工作示例

//Generates a random number for div id
function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}


//Exhibitors
const qaList = [
  { 
    faqId: uuidv4(),
    question: "Item 1",
    answer: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  },
  { 
    faqId: uuidv4(),
    question: "Item 2",
    answer: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  },
  { 
    faqId: uuidv4(),
    question: "Item 3",
    answer: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  },
  { 
    faqId: uuidv4(),
    question: "Item 4",
    answer: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  },
  { 
    faqId: uuidv4(),
    question: "Item 5",
    answer: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  },
  { 
    faqId: uuidv4(),
    question: "Item 6",
    answer: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch."
  }  
];


function qaTemplate(faq) {
  return `
  <div class="card">
    <div class="card-header" role="tab" id="heading-${faq.faqId}">
      <a data-toggle="collapse" data-parent="#accordionEx" href="#i-${faq.faqId}" aria-expanded="false" aria-controls="${faq.faqId}">
        <h5 class="mb-0">
          ${faq.question} <i class="fas fa-angle-down rotate-icon"></i>
        </h5>
      </a>
    </div>

    <div id="i-${faq.faqId}" class="collapse" role="tabpanel" aria-labelledby="heading-${faq.faqId}"
      data-parent="#accordionEx">
      <div class="card-body">
        ${faq.answer}
      </div>
    </div>

  </div>
  `
}

document.getElementById("accordionEx").innerHTML = `${qaList.map(qaTemplate).join(' ')}`;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-8 offset-md-2 mx-auto">
      <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true"></div>
    </div>
  </div>
</div>