更改CSS样式表src on [英] Changing CSS stylesheet src onChange of select box

问题描述

<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

THE HTML MOCK

<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>

基本上我想做的是在select的change事件上，它将改变头部的link标签的src ...例如

Basically what I want to do is on the change event of the select it will change the src of the link tag in the head...such as

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

并且每次我在测试时提醒我最后一次选择时都想更改它，仅花了5分钟的时间，然后尝试使用jQuery的javascript函数.它没有任何建议吗?

And would like to change it each time I have the last selection alerted out for when I was testing this, just something 5 mins threw together, and trying out the javascript function with jQuery. It is not running any suggestions?

我尝试取出整个内部代码，但不断使achat_change_themes处于未定义状态吗?我一定写错了功能吗?

I tried taking out the entire inner code and I keep getting achat_change_themes undefined? I must be writing the function incorrectly?

推荐答案

我有一些建议，既可以尝试直接回答您的问题，也可以尝试改善您的代码，如果您不介意的话:

I have a few suggestions, both trying to answer your questions directly and, if you don't mind, also trying to help improve your code:

建议1:我认为您正在寻找链接的"href"属性，而不是"src"属性.

Suggestion 1: I think you're looking for the 'href' property of the link, not 'src'.

建议2:我想这只是为了说明这一点，但以防万一(我忘记了很多类似的事情):请确保更改"www.avacwebthemes.vacau".到时将com/css/mario_theme.css更改为适当的地址.

Suggestion 2: I'm guessing it's just to make the point, but just in case (I've forgotten many things like this): make sure to change 'www.avacwebthemes.vacau.com/css/mario_theme.css' to the appropriate address when the time comes.

建议3:在以下内容中使用javascript switch语句您的函数，而不是一堆if.更加干净:

Suggestion 3: Use the javascript switch statement in your function instead of a bunch of if's. It's way cleaner:

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，则建议使用类似以下代码的内容(脚本块位于主体内部，而不是头部):

Suggestion 4: If you are trying to get into jQuery, I'd recommend using something like the following code (the script block goes inside the body, not the head):

<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>

这篇关于更改CSS样式表src on的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！