javascript - 使用 JQuery 方法查找类。在 Rails 应用程序中使用 JavaScript 文件

Question

文本“pearl”和“diamond”是存储在 localStorage 中的数组中的元素。我找不到任何好的资源来帮助我从 localStorage 中提取数据，以便我可以在 Rails 中显示和操作数据。因此，我在 application.js 文件中编写了一个函数来帮助我查找文本和周围的类。

这是 html 中的信息。

<div class="ruby-gem">
  <a target="_blank" href="https://www.website.com/pearl">pearl</a>
  <img class="star-pic" src="/assets/star-gray.png" alt="star pic">
</div>
<div class="ruby-gem">
  <a target="_blank" href="https://www.website.com/diamond">diamond</a>
  <img class="star-pic" src="/assets/star-gray.png" alt="star pic">
</div>

这是我在 application.js 文件中的函数。现在变量 findSrc 未定义。

function checkStorage(){
  var storage = JSON.parse(localStorage.getItem("rubygems"))
  var gems = $(".ruby-gem a").map(function(){
    return $(this).text()
  }).get()
  for (var i = 0; i < gems.length; i++){
    if(storage.includes(gems[i])){
      var gemFavorite = gems[i]
      var findDiv = $("a:contains(gemFavorite)")
      var findImgClass = findDiv.next()
      var findSrc = $(findImgClass).find("img").attr("src")
      if(findSrc == "/assets/star-gray.png"){
        $(findImgClass).attr("src", "/assets/star-blue.png")
      }
    }
  }
}

最终目标是如果项目位于 localStorage 中，则将图像从灰色星形更改为蓝色星形。这可能不是最好的方法，但我无法找到更好的解决方案。

如有任何建议，我们将不胜感激。

Answer 1

您忽略了将 gemFavorite 变量正确插入到选择器字符串中。

var findDiv = $("a:contains(" + gemFavorite + ")")