使用JQuery方法查找類。在rails應用程序中使用JavaScript文件

文本「珍珠」和「菱形」是存儲在localStorage中的數組中的元素。我找不到任何有用的資源來幫助我從localStorage中獲取數據，因此我可以在rails中顯示和處理數據。因此，我在我的application.js文件中編寫了一個函數來幫助我找到文本和周圍的類。使用JQuery方法查找類。在rails應用程序中使用JavaScript文件

以下是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中，則將圖像從灰星更改爲藍星。這可能不是最好的辦法，但我無法找出更好的解決方案。

任何意見將不勝感激。

來源

2017-07-04 C. Yee

'$（「A：含有（gemFavorite）「）'，不會自動將變量gemFavorite的內容切換到該點，喲你需要做實際的字符串連接或使用模板文字。 –

您已忽略將gemFavorite變量正確插入到選擇器字符串中。

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

來源

2017-07-04 18:27:23 James

明白了。謝謝！！ –

你爲什麼將它們存儲在localStorage的？ '珍珠'和'鑽石'從哪裏來？

我可以想像他們是來自上一頁的數據嗎？

如果我是你，我會將數組存儲在params中，當它只有兩個我們正在談論的時候。

例如

我只是猜測

前一頁：

<a href="link_to_the_page_your_showing?#{{p: "pearl", d:"diamond"}.to_query}"> 
Go blue star!</a> 
<!-- output in the url on next page: "d=diamond&p=pearl" --> 
<a href="link_to_the_page_your_showing">Go boring gray star!</a>

你的頁面：

<!-- Using erb to manipulate the src in img --> 
<div class="ruby-gem"> 
<a target="_blank" href="https://www.website.com/pearl">pearl</a> 
<img class="star-pic" src="/assets/<%= params[:p] == "pearl" ? "star- 
blue" : "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/<%= params[:d] == "diamond" ? "star- 
blue" : "star-gray" %>.png" alt="star pic"> 
</div>

來源

2017-07-04 18:48:15

感謝您的建議。是的，「珍珠」和「鑽石」來自上一頁。分配是將項目存儲在localStorage中。他們希望存儲在客戶端的數據不在服務器端。來自上一個答案的代碼行仍然有效，但仍然很難改變「src」。如果有更好的方法從localStorage中提取信息，所以我可以在erb中操作它，這會更好。 –

他們可以用餅乾嗎？ –

不幸的是，沒有。這就是爲什麼它會讓頭部旋轉。 :) –

使用JQuery方法查找類。在rails應用程序中使用JavaScript文件

回答

相關問題