Ruby on Rails的，用JavaScript

圖像的變化來源我有一個JavaScript函數，當用戶向下滾動Ruby on Rails的，用JavaScript

$(window).scroll(function() { 
    if ($(document).scrollTop() > 0) { 
     switchToStatic(); 
    } 
    else { 
     switchToAnimated(); 
    } 
} 

function switchToAnimated() { 
    if ($(window).width() > 768) { 
     $('body').css('padding-top', '0'); 
     $('#logo').attr('src', '../assets/blue_logo.png') 
     $('#logo').css('width', '15vw'); 
     $('.navbar').css("background-color", 'transparent'); 
    } 
} 

function switchToStatic() { 
    $('body').css('padding-top', '50px'); 
    $('#logo').attr('src', '../assets/white_logo.png') 
    $('#logo').css('width', '7.5vw'); 
    $('.navbar').css("background-color", '#3B98F2'); 
}

我的應用程序是建立在Ruby on Rails的，其改變圖像的一個我的網頁上。苗條的標記看起來像這樣

a href="http://www.thisisarealsite.com" 
    = image_tag("white_logo.png", alt: "logo", id: "logo")

在我的本地功能的正常工作，但我們何時推出現場製作的文件丟失。我知道rails將所有東西都吸收到了一個共同的目錄中，但我不知道如何解決這個問題，以使圖像在本地主機和生產環境中以我想要的方式運行。我試圖拿走'../assets/'參考，只是指向該文件，但這不適用於本地主機或生產。

來源

2016-11-08 Nick Gilbert

Rails正在使用的資產管道這增加了指紋每個JS，CSS和其他資產的文件。所以你不能只通過它的名字獲取文件，你需要使用帶有指紋的名字。 image_tag幫助程序將生成正確的路徑，所以您需要做的是以某種方式將這些路徑注入JavaScript。

例如，你可以做這樣的事情：

javascript: 
    var blueLogoPath = "#{asset_path('blue_logo.png')}"; 
    var whiteLogoPath = "#{asset_path('white_logo.png')}";

然後

$('#logo').attr('src', whiteLogoPath);

來源

2016-11-08 21:30:44

我喜歡這個答案，問題是瀏覽器使用雙引號將其呈現爲純HTML格式，最終導致不匹配並引發語法錯誤。 –

其實罷工，我得到它通過切換雙引號單引號呈現。不幸的是，現在src被設置爲圖像標籤。我需要使用不同的方法，除了attr –

嘿@NickGilbert我更新了我的答案。你需要調用'asset_path'幫手而不是'image_tag'。它會生成普通的網址。 –

請嘗試移動徽標到您public文件夾，並引用他們是這樣的：

$('#logo').attr('src', '/blue_logo.png')

$('#logo').attr('src', '/white_logo.png')

來源

2016-11-08 21:24:58 rebagliatte

/blue_logo.png沒有發現在localhost –

哦，我們對此深感抱歉！忘了提及你應該將你的標誌移動到公共文件夾。爲了清晰起見，我剛剛更新了答案。 – rebagliatte

Ruby on Rails的，用JavaScript

回答

相關問題