文本“珍珠”和“钻石”是存储在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/