1

スタイルシート スイッチャーを作成する必要がある Web サイトがあります。今では、html/css/js に関するすべてのことに関してはほとんど独学なので、初心者であることをあらかじめご容赦ください。ニーズに合わせていくつかのコードを変更しましたが、頭の中の特定の行を対象とするようにコードを変更する方法が見つからないようです。

現在、これは私が持っているものです：

<ul id="nav">
    <li><a href="#" rel="http://files.enjin.com/149304/theme-dark.css">Dark</a></li>
    <li><a href="#" rel="http://files.enjin.com/149304/theme-light.css">Light</a></li>
</ul>

<script>
$(document).ready(function() { 
    $("#nav li a").click(function() { 
        $("link").attr("href",$(this).attr('rel'));
        return false;
    });
});

$(document).ready(function() { 
    if($.cookie("css")) {
        $("link").attr("href",$.cookie("css"));
    }
    $("#nav li a").click(function() { 
        $("link").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        return false;
    });
});

$(document).ready(function() { 
    if($.cookie("css")) {
        $("link").attr("href",$.cookie("css"));
    }
    $("#nav li a").click(function() { 
        $("link").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        return false;
    });
});
</script>

現時点では、このコードは head 内のすべての href を変更し、ページを破棄するだけです。

これは、変更する必要がある href です (22 行目にあります)。

<link href="./Home - Oceanian Gaming Community_files/theme.php" media="screen" rel="stylesheet" type="text/css">

どんな助けでも大歓迎です。

4

1 に答える 1

0

ソース コードの行番号で DOM 要素をトラバースすることはできません。

何らかの手法を使用して、変更する必要があるリンク タグを区別する必要があります。簡単な提案は、カスタム属性を使用することです。

例：

<link xtype="1" href="./Home - Oceanian Gaming Community_files/theme.php"  ... >

これで、セレクターを介して参照し、簡単に操作できるようになりました。

$(document).ready(function() { 
    $("#nav li a").click(function() { 
        $("link[xtype="1"]").attr("href", $(this).attr('rel'));
        return false;
    });
});

上記は、目的に必要な唯一の準備が整ったハンドラーです。

やや危険な解決策は、属性を含むセレクターを使用して特定のリンク タグに一致させることです。ページの内容によっては、これが複数のリンク タグに一致する可能性があるというリスクがあります。

$("link[href*="/theme.php"]")

サイトを確認した後に編集します。

わかりました、いくつかのことが間違っていました。

まず、引用符が間違っていました- $('link[href*="/theme.php"]') が必要です。つまり、パターンの外側にシングル、内側にダブル (またはその逆ですが、両方の場所で同じではありません) .

第 2 に、一度変更すると、href 属性を変更したため、パターン href*="/theme.php" は再び一致しなくなります。そのため、最初に を変更するときにカスタム属性を追加し、hrefこのカスタム属性を使用して 2 回目以降のリンク タグに一致させます。

if($('link[xtype]').length == 0) {
    // first time - set href and add custom attribute
    $('link[href*="/theme.php"]').attr("href", $(this).attr('rel')).attr('xtype', 1);
}
else {
    // second time on wards
    $('link[xtype]').attr("href", $(this).attr('rel')).attr('xtype', 1);
}
于 2013-04-01T05:39:44.730 に答える