javascript - 更改选择框的 CSS 样式表 src onChange

Question

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

<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 的更改事件上它将更改 head 中链接标记的 src ...例如

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

每次我在测试这个时都会收到最后一个选择的警报，我想更改它，只需 5 分钟的时间，然后用 jQuery 尝试 javascript 函数。它没有运行任何建议吗？

我尝试取出整个内部代码，但总是出现achat_change_themes未定义？我一定是函数写错了？

Answer 1

我有一些建议，既试图直接回答您的问题，如果您不介意，也试图帮助改进您的代码:

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

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