文本“珍珠”和“钻石”是存储在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中,则将图像从灰色星形更改为蓝色星形。这可能不是最佳方法,但是我找不到更好的解决方案。

任何建议将不胜感激。

最佳答案

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



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

关于javascript - 使用JQuery方法查找类。在Rails应用程序中使用JavaScript文件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44912094/

10-09 17:04