[英]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>
THE HTML MOCK 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>
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 基本上我想做的是在select的change事件上,它将改变head中link标签的src ...例如
<link type="text/css" rel="stylesheet" title="chat_theme" href="http://sourcefile.com/css/file.css">
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. 并且想在每次测试时提醒我最后选择的内容时都进行更改,只需5分钟,然后尝试使用jQuery的javascript函数。 It is not running any suggestions? 它没有运行任何建议吗?
I tried taking out the entire inner code and I keep getting achat_change_themes undefined? 我试着取出整个内部代码,但我不断得到achat_change_themes未定义? 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: 我有一些建议,既可以尝试直接回答您的问题,也可以(如果您不介意的话)尝试帮助改善您的代码:
Suggestion 1: I think you're looking for the 'href' property of the link, not 'src'. 建议1:我认为您正在寻找链接的“ href”属性,而不是“ src”属性。
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. 建议2:我猜只是为了提出要点,但以防万一(我忘记了很多类似的事情):请确保将“ www.avacwebthemes.vacau.com/css/mario_theme.css”更改为时间到了合适的地址。
Suggestion 3: Use the javascript switch statement in your function instead of a bunch of if's. 建议3:在函数中使用javascript switch语句 ,而不要使用if 语句 。 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
}
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): 建议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>
Use the jQuery change() event instead of onChange: 使用jQuery change()事件代替onChange:
attr("src",link);
is wrong - you should be changing the href instead. 是错误的-您应该改为更改href。
And instead of using attr("val")
to get the value of a dropdown, you need val(). 而不是使用attr("val")
来获取下拉列表的值,您需要使用val()。
You also misspelled #achat_themes
as #achat_times
. 您还将#achat_themes
拼写为#achat_times
。
Here's a fiddle with all of your problems fixed: 解决所有问题的方法是这样:
Why don't you try this way: 您为什么不这样尝试:
Try the fiddle out: http://jsfiddle.net/Ng24P/ 尝试拨弄: 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'));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.