Question

我的代码在chrome中工作正常，但是在IE中显示错误无效字符，是否还有其他方法可以做到这一点，我尝试使用单/双引号在IE中也无法正常使用。谁能建议我该怎么做。 $(`.${divClass}`)从这里出现错误。

$(".benefits").click(function() {
  let otherButtons = $(".benefits").not($(this));
  otherButtons.siblings(".card-body").addClass("noDisplay");
  otherButtons.parent().removeClass("active");
  $(this).parent().addClass("active");
  $('.benefits-wrap').children('div').addClass("noDisplay");
  let divClass = $(this).data('div');
  $(`.${divClass}`).toggleClass("noDisplay");
});

.benefits-slideDiv1 {
  background-color: red;
}

.benefits-slideDiv2 {
  background-color: blue;
}

.benefits-slideDiv3 {
  background-color: green;
}

.benefits-slideDiv4 {
  background-color: pink;
}

.noDisplay {
  display: none;
}

div#accordionExample {
  display: flex;
  flex-direction: column;
}

.benefits-wrap {
  background: #ccc;
  height: 100px;
}

.benefits-acc.active {
  background-color: lightblue;
}

.benefits-acc.active h3 {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="accordion nav" id="accordionExample" id="myTab" role="tablist">
  <div class="benefits-acc active">
    <button class="benefits d-flex benefits-slide1" data-div="benefits-slideDiv1">
      <h3 class="pl-3">Personalized health journey</h3>
    </button>
    <div class="card-body benefits-slideDiv1">
      <p>content 1</p>
    </div>
  </div>
</div>
<div class="benefits-acc">
  <button class="benefits d-flex benefits-slide2" data-div="benefits-slideDiv2">
    <h3 class="pl-3">Personalized health journey</h3>
  </button>
  <div class="card-body benefits-slideDiv2 noDisplay">
    <p>content 2</p>
  </div>
</div>
<div class="benefits-acc">
  <button class="benefits d-flex benefits-slide3" data-div="benefits-slideDiv3">
    <h3 class="pl-3">Personalized health journey</h3>
  </button>
  <div class="card-body benefits-slideDiv3 noDisplay">
    <p>content 3</p>
  </div>
</div>
<div class="benefits-acc">
  <button class="benefits d-flex benefits-slide4" data-div="benefits-slideDiv4">
    <h3 class="pl-3">Personalized health journey</h3>
  </button>
  <div class="card-body benefits-slideDiv4 noDisplay">
    <p>content 4</p>
  </div>
</div>
</div>
<div class="benefits-wrap">
  <h3>Second content block</h3>
  <div class="benefits-slideDiv1"> Second content 1</div>
  <div class="benefits-slideDiv2 noDisplay">Second content 2</div>
  <div class="benefits-slideDiv3 noDisplay">Second content 3</div>
  <div class="benefits-slideDiv4 noDisplay">Second content 4</div>
</div>

Answer 1

该符号用于表示Template Literal string，它在IE中不受支持，因此会显示错误。

要解决此问题，请使用传统的字符串连接：

$('.' + divClass).toggleClass("noDisplay");

严重重音符号显示IE中的错误

1 个答案: