Question

我想让我的游戏改变颜色中的一个类，所以我为每种颜色使用了不同的css文件。样式表位于名为stylesheets的文件夹中。我使用下面的脚本使它简单，短，可用于所有颜色，但颜色不会改变。我认为问题在于href链接。我的脚本有问题吗？

jQuery的：

<script type="text/javascript">
function updateColor(filename) {
        $('head').children(":last").append('<link rel="stylesheet" href="stylesheets/" + filename + ".css" />');
}
</script>

HTML：

<select>
  <option href="javascript:updateColor('blue')">Blue</option>
  <option href="javascript:updateColor('black')">Black</option>
  <option href="javascript:updateColor('gray')">Gray</option>
  <option href="javascript:updateColor('green')">Green(Default)</option>
  <option href="javascript:updateColor('pink')">Pink</option>
  <option href="javascript:updateColor('yellow')">Yellow</option>
</select>

Answer 1

最简单的方法是在头部输出一个包含默认样式表的链接标记。看起来你的例子看起来是绿色的。

<link rel="stylesheet" id="color-changer" href="stylesheets/green.css">

然后将您的选择更改为：

<select>
  <option value="blue">Blue</option>
  <option value="black">Black</option>
  <option value="gray">Gray</option>
  <option value="green" selected>Green(Default)</option>
  <option value="pink">Pink</option>
  <option value="yellow">Yellow</option>
</select>

然后你的js变成：

$(function(){
    $('select').change(function() {
        $('#color-changer').attr('href','stylesheets/' + $(this).val() + '.css') ;
    });
});

如果您想坚持使用附加新样式表的方法，可以使用以下js：

$(function(){
    $('select').change(function() {
        $('head').append('<link rel="stylesheet" href="stylesheets/' + $(this).val() + '.css" />') ;
    });
});

Answer 2

HREF =＆＃34;样式表/＆＃39; + filename +＆＃39; .css＆＃34;

应该有效，因为你开始使用＆＃39;所以＆＃34;没有阻止它

Answer 3

正如所指出的那样，你的串联有些错误。您还需要某种类型的事件来进行JQuery，例如更改或单击。 href路径中的相对路径可能存在问题。根据您现在拥有的内容，stylesheets目录需要与HTML文件位于同一目录中。

一种方法是为每个选项创建一个新的样式表链接，这可能会更好，因为head内没有遍历。

<强> HTML：

<select id="color">
    <option value="blue">Blue</option>
    <option value="black">Black</option>
    <option value="gray">Gray</option>
    <option value="green">Green(Default)</option>
    <option value="pink">Pink</option>
    <option value="yellow">Yellow</option>
</select>

<强> JS：

$('#color').on('change', function (e) {
    var selected = $("option:selected", this);
    var color = this.value;
    $('head').append
     ('<link rel="stylesheet" href="stylesheets/' + color + '.css" />');
});

我相信整个方法存在一个大问题，一旦用户离开页面（或刷新），除非您使用LocalStorage（仅限HTML5）或Cookie，否则您的链接将会消失。可能你的情况还可以。如果可能的话，我强烈建议使用PHP，在这种情况下IMO更易于管理。

使用不同的css文件更改类的颜色

3 个答案: