更改CSS样式表src onChange选择框

时间:2013-02-03 06:47:03

标签: javascript jquery 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

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

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

并且每当我在测试时提醒最后一个选择时,我想改变它,只需要5分钟就可以了,并且使用jQuery尝试javascript函数。它没有运行任何建议?

我尝试取出整个内部代码,并且我一直在修改achat_change_themes吗?我必须写错了函数吗?

3 个答案:

答案 0 :(得分: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,我建议使用类似下面的代码(脚本块进入正文,而不是头部):

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

答案 1 :(得分:0)

使用jQuery change()事件而不是onChange:

attr("src",link);错了 - 你应该改变href。

而不是使用attr("val")来获取下拉列表的值,而是需要val()。

您还错误#achat_themes #achat_times

这是你解决所有问题的小提琴:

http://jsfiddle.net/498Z5/

答案 2 :(得分:0)

你为什么不试试这种方式:

尝试小提琴: 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'));
}