選擇框更改CSS樣式表SRC的onChange

<script type="text/javascript"> 
    function achat_change_themes() { 
     var rel = $('link[title="chat_theme"]'); 
     var select = $('#achat_times').attr('value'); 
    if(select == "GrayScale") { 
     rel.attr('src' , 'www.avacwebthemes.vacau.com/css/mario_theme.css'); 
    } 
    else if (select == "Mario") { 
    rel.attr('src' , 'www.avacwebthemes.vacau.com/css/mario_theme.css'); 
    } 
    else if (select == "Eartone") { 
    rel.attr('src' , 'www.avacwebthemes.vacau.com/css/mario_theme.css'); 
    } 
    else if (select == "Dark") { 
    rel.attr('src' , 'www.avacwebthemes.vacau.com/css/mario_theme.css'); 
    } 
    else if (select == "Floral") { 
    rel.attr('src' , 'www.avacwebthemes.vacau.com/css/mario_theme.css'); 
    } 
    else if (select == "Military") { 
    alert(www.avacwebthemes.vacau.com/css/mario_theme.css); 
    } 

    } 
</script>

的HTML MOCK選擇框更改CSS樣式表SRC的onChange

<select id="achat_themes" onChange="achat_change_themes();"> 
    <option value="GrayScale">GrayScale</option> 
    <option value="Mario">Mario</option> 
     <option value="EarthTone">EarthTone</option> 
     <option value="Dark">Dark</option> 
      <option value="Floral">Floral</option> 
      <option value="Military">Military</option> 
    </select>

基本上就是我想要做的是在選擇的更改事件會改變的鏈接標籤的src在頭......如

<link type="text/css" rel="stylesheet" title="chat_theme" href="http://sourcefile.com/css/file.css">

而且希望每個我都最後選擇了警報，當我在測試這個時間去改變它，只是一些5分鐘的togethe扔r，然後用jQuery嘗試javascript函數。它沒有運行任何建議？

我試着拿出整個內部代碼，我不斷得到achat_change_themes undefined？我必須錯誤地寫入功能？

來源

2013-02-03 EasyBB

我有幾個建議，都試圖直接回答你的問題，如果你不介意的話，也想幫助改善您的代碼：

建議1：我認爲您正在尋找鏈接的'href'屬性，而不是'src'。

建議2：我猜它只是做了點，但爲了以防萬一（我忘了這樣多的東西）：一定要改變「www.avacwebthemes.vacau.com/css/當時間到了，mario_theme.css'到適當的地址。

建議3：在您的函數中使用javascript switch statement而不是一堆if。它的方式清潔：

switch(select) 
{ 
    case "Grayscale":  
    { 
     rel.attr('href', 'www.avacwebthemes.vacau.com/css/mario_theme.css'); 
     break; 
    } 

    case "Mario": 
    { 
     rel.attr('href', 'www.avacwebthemes.vacau.com/css/mario_theme.css'); 
     break; 
    } 
    //Etc 
}

建議4：如果你試圖進入jQuery的，我建議使用如下代碼（腳本塊進入身體內部，而不是頭）的東西：

<script> 
$(function() { 
     $('#achat_themes').change(function() { 
       var rel = $('link[title="chat_theme"]'); 
       switch($(this).val()) 
       { 
        case "Grayscale":  
        { 
         rel.attr('href', 'www.avacwebthemes.vacau.com/css/mario_theme.css'); 
         break; 
        } 

        case "Mario": 
        { 
         rel.attr('href', 'www.avacwebthemes.vacau.com/css/mario_theme.css'); 
         break; 
        } 
        //Etc 
       } 
      }); 
    }); 
</script>

來源

2013-02-03 07:46:34 asifrc

謝謝你的解釋，現在爲什麼不頭和裏面的身體如果我可以問？ – EasyBB

很高興爲您提供幫助。將其放置在主體中可以使身體中的所有非腳本元素首先加載，然後觸發document.ready事件。「$（function（）{...}）;」綁定到document.ready，所以一旦所有html元素都加載到DOM中，它就會觸發。這是因爲頭部的所有內容都必須先加載才能在body上啓動，並且爲document.ready保存這些腳本將首先向用戶顯示主體，然後（主要是即時）執行腳本。 – asifrc

作爲附加說明，使用jQuery綁定事件，即在腳本中使用$（selector）.change（fn（）{...}），而不是在頭部定義fn（），並將onChange設置爲'fn（）'在每個你需要的功能元素的標籤中，將使你的生活變得更容易，只需要一次。（您可以調整選擇器以適應新元素，例如從$（「。oldelementclass」）。change（fn（）{..}）;到$（「。oldelementclass，#newelementid，.newelementclass」）。 fn（）{..}）;它還使動態更改.change（以及其他事件）函數變得更容易 – asifrc

使用jQuery的變化（）事件代替的onChange的：

attr("src",link);是錯誤的 - 你應該改變，而不是在href。

而不是使用attr("val")來獲取下拉的值，您需要val（）。

您還可以將拼寫#achat_themes也標爲#achat_times。

這裏與您的所有問題，小提琴固定：

http://jsfiddle.net/498Z5/

來源

2013-02-03 07:02:10 Lrdwhyt

那個小提琴不起作用。值屬性內聯我設置的值。 src部分是的，我確實忽略了以及id選擇器。我會繼續努力，看看它是如何發展的。 – EasyBB

@EasyBB當你說value屬性內聯我設置的值時，不確定你的意思。小提琴爲我工作 - 這更容易看到[這裏]（http://jsfiddle.net/498Z5/1/）。你希望外部樣式表的源文件在下拉菜單時被更改，對嗎？ – Lrdwhyt

大聲笑是的，我得到它的工作，只是檢查控制檯區域和檢查，不知道你有所有的CSS到mario.css大聲笑。抱歉。你可以幫我解決我的另一個問題嗎？ http://stackoverflow.com/questions/14658850/need-to-get-the-a-name-for-each-post-for-the-plugin – EasyBB

你爲什麼不試試這個方法：

試着搗鼓出來：http://jsfiddle.net/Ng24P/

$(function() { 
    $('#achat_themes').change(function() { 
     changeTheme($(':selected').val()); 
    }); 
}); 

function changeTheme(theme) { 
    var stylshit = $('[title="chat_theme"]'); 
     stylshit.attr('href','http://sourcefile.com/css/'+theme.toLowerCase()+'.css'); 
     alert(stylshit.attr('href')); 
}

來源

2013-02-03 09:20:14 Jai

選擇框更改CSS樣式表SRC的onChange

回答

相關問題