所选内容中的mark.js触发事件

Question

我似乎想不出如何使用mark.js (或其他一些工具)来让我在内容列表中选择按钮时触发动画高亮显示。

想象一下，在页面的左边是一个问题列表。当用户选择其中一个问题/点击一个问题时，相应的答案会以某种方式突出显示在右侧。这可能是页面的右侧变暗，除了相应的文本或相应文本周围的红色框架动画，或者是highlighted...any的想法？

换句话说，高亮显示是基于点击或点击触发的，而不是基于搜索结果。

Answer 1

你不需要mark.js，因为它更简单：

​

$(function() {
  $("[data-question]").on("click", function() {
    var number = $(this).attr("data-question");
    $("[data-answer]").removeClass("highlight");
    $("[data-answer='" + number + "']").addClass("highlight");
  });
});

.questions,
.answers {
  float: left;
  width: 50%;
}

.highlight {
  background: red;
}

<div class="questions">
  <ul>
    <li data-question="1">Question 1</li>
    <li data-question="2">Question 2</li>
    <li data-question="3">Question 3</li>
  </ul>
</div>
<div class="answers">
  <ul>
    <li data-answer="1">Answer 1</li>
    <li data-answer="2">Answer 2</li>
    <li data-answer="3">Answer 3</li>
  </ul>
</div>

​