Question

我正在使用跳房子来创建游览。我正在编写游览而无法访问实际的HTML，因此我无法将其更改为具有唯一ID。因此我需要根据元素的innerhtml访问元素，因为有很多具有相同名称的div。以下是跳房子的链接

http://linkedin.github.io/hopscotch/

以下是代码示例：

 <div class="myContent">
     <div class="myTitle">
         Section 1
     </div>
 </div>

 <div class="myContent">
     <div class="myTitle">
         Section 1
     </div>
 </div>

 <div class="myContent">
     <div class="myTitle">
         Section 2
     </div>
 </div>

 <div class="myContent">
     <div class="myTitle">
         Section 3
     </div>
 </div>

所以我的旅行看起来像这样：

  var tour = {
  id: "welcome_to_my_tour",
  steps: [
    {
      title: "First Tour",
      content: "The following short tour will guide you through everything you need to know",
      target: "header",
      placement: "bottom",
      xOffset: "center"
    }

对于目标你通常只是放置元素的id但当然不会工作，因为有很多具有相同id的元素。我从文档中看到你也可以使用：

target: document.querySelector("#content p")

因此我认为可以通过以下方式访问它：

target: document.querySelector(".myTitle").innerHTML("section 3")

当然这不是真正的代码，但你可以看到我去哪里，我试着用谷歌搜索并继续提出如何用innerHTML读取值，但我无法想象如何根据innerHTML值访问元素或如果它是可能的，如果没有，是否有更好的方法来做到这一点？

Answer 1

如果你可以使用jQuery :contains选择器在这里派上用场。你可以这样做：

target: $(".myContent :contains('Section 3')")[0]

document.querySelector不支持:contains，但您可以在IIFE (immediately-invoked function)中使用它。它比jQuery更冗长：

target: (function(){
  var titles = document.querySelectorAll(".myTitle");
  for(var i = 0; i < titles.length; i++) {
    if(titles[i].innerHTML.indexOf('Section 3') >= 0) {
      return titles[i];
    }
  }
}())

获取innerhtml文本与值匹配的元素 - Hopscotch和javascript

1 个答案: