更新視圖背景後操作軌道

我試圖更新元素背景圖像時控制器操作被調用，並沒有能夠弄清楚。在我看來，我有以下標籤更新視圖背景後操作軌道

<%= link_to '', color_animal_path(@article), method: :post, :id => "animal-image", remote: true %>

當它點擊它在我的AnimalsController.rb調用下面的方法

def color 
    respond_to do |format| 
     format.js {} 
    end 
    puts 'color called' 
    end

我有一個名爲color.js在應用中的以下內容的js文件/資產/ JavaScript的

$('#animal-image').css('background-image', 'url("green.jpg")');

而該元素的CSS看起來像這樣

#animal-image { 
    float: left; 
    width: 28px; 
    height: 28px; 
    background: grey; 
    background: url('red.png') no-repeat; 
    background-size: contain; 
}

視圖呈現與紅色圖像正確，並點擊圖像調用控制器（我可以看到puts輸出），但元素背景圖像不更新...我希望有人可以幫助，上午我在正確的軌道上，我錯過了什麼？

謝謝

來源

2017-04-05 eclipse1203

點擊的背景是否有任何事情發生？我只是想知道圖片的路徑是否需要調整？ –

根本沒有背景變化，仍然顯示原始圖像...謝謝 – eclipse1203

UJS電話有什麼特別的理由嗎？爲什麼不在客戶端jQuery中完成這一切？

即使有一個原因（例如，顏色需要由服務器動態設置，或者你想跟蹤事件），我建議在客戶端隔離測試它，直到你得到它的工作 - 然後重新整合Rails UJS組件。

例如，開始添加新的CSS類的綠色形象：

#animal-image.updated { 
    background-image: url('green.png'); 
}

然後添加一些JS：

$("#animal-image").click(function() { 
    $(this).toggleClass('updated'); 
});

如果所有的作品，那麼你可以把它全部導入color.js，然後在瀏覽器的開發工具中驗證響應是否正確返回並正在進行評估。

來源

2017-04-05 20:49:37 gwcodes

這是一個好主意，並且完美地工作。非常感謝您的幫助。 – eclipse1203

快速跟進問題，如果你有一秒。我將上面的鏈接渲染到部分內部，因此我有多個渲染視圖。 js只針對第一個（更改第一個，點擊其他所有人更改第一個圖像）。我怎樣才能使它改變正確的部分？ – eclipse1203

@ eclipse1203：這是否意味着你在HTML中多次重複使用相同的'id'？如果是這樣，那可能會解釋你原來的問題。 ids在HTML文檔中應該是唯一的，所以請嘗試在每次迭代中添加一些內容以使其獨一無二，例如，在最基本的層面上，你可以將'@ article'編號附加到'id'名字。或者你可能會更好地使它成爲一個班級？ – gwcodes

更新視圖背景後操作軌道

回答

相關問題