1

私のサイトがjavascript以外のユーザーにとって使いやすいものにするために、JavaScriptを使用せずにサイトを構築し、サイトの構築後に追加しました。

だから今私は次のようなリンクを持っています：

<a href="http://example.com/panel" id="showPanel">Expand</a>

ただし、JavaScriptが有効になっている場合は、次のコードを使用します。

$("#showPanel").attr("href", "#showPanel");

リンクがhttp://example.com/panelではなく#showPanelを指すようにします

これはすべて正常に機能しますが、これを行うためのより良い方法があるかどうか疑問に思わずにはいられません。

4

3 に答える 3

1

ページの下部にあるJSファイルをロードします。実行しているJavaScriptがページに既に読み込まれている場合は、問題は発生しないはずです。

$(document).ready(function() {
    // change links.
});

JSの生の行数を減らしたい場合は、いくつかの規則に従って、URLの変更を自動化することができます。

var changeAllLinks = function () {
    var allLinks = $("a[href^='http://example.com']");
    for (int i = 0; i < allLinks.length; i++) {
        allLinks[i].attr("href", "#show" + /* substring for the path */);
    }
};

そのようなものが（概念的に）機能する可能性があるので、単なるアイデアです。JSのないすべてのリンクがフォーム<a href="http://example.com/foo">にあり、JSを使用してそれらをに変更するという規則に従うことができます<a href="#showFoo">。そうすれば、すべてのリンクとサブストリングをループしてパスを取得し、最初の文字を大文字にして、先頭にaを追加し、それを属性#showにポップすることができます。href

于 2012-10-02T19:41:12.863 に答える
0

コメントで、この方法は非常に面倒だとおっしゃいました。これは私の主な関心事によるでしょう。これを自動化する方法を見つけたいと思うかもしれません。rel-attributeをセレクターとして使用してこのソリューションを考え出しました。

<a href="showThing1" rel="javascriptable">This links via javascript</a>
<a href="showThing2">Always links to a new page</a>

// load when ready
$(document).ready(function() {
    // Find all links with the correct rel attribute
    $('a[rel="javascriptable"]').each(function(index) {
        // Change the href attribute
        oldlink = $(this).attr('href');
        newlink = # + oldlink;
        $(this).attr('href', newlink);
    });
});

私のjqueryは少し錆びているので、コピー/貼り付けは実際には機能しないと思います

于 2012-10-02T19:56:34.933 に答える
0

ページの読み込み時間についてはあまり気にしないでください。
これは、ダウンロードが停止するまでにかかる時間の尺度にすぎず、ユーザーがサイトを使用できるようになるまでにかかる時間の尺度ではありません。

懸念されるのは、pageloadがページを使用する（またはページを表示する）機能をブロックする場合です。たとえば、CSSをロードする前に、ページの上部にすべてのJSをロードする場合などです。

個人的には、あなたのフォーマットは素晴らしいと思いますが、それはあなたが多くの割り当てを行っているように見えますid、そしてjQueryは手で聞いています、それは恐ろしい、ひどいことです。

data-sethtml5属性を使用するようなことをしてみませんか？

<a data-linkType="JS-Override" data-methodName="doSomethingInternally">link</a>

datasetプログラムから、要素のを呼び出すことができます。

var anchors = document.getElementsByTagName("a");
[].forEach.call(anchors, function(anchor) {
    if (anchor.dataset.linkType !== "JS-Override") { return; }

    var extension = anchor.dataset.methodName;
    anchor.addEventListener("...", function () { setHash(extension); }, false); 
});

これは非常に簡単な例ですが、機能します。現在、データセットのサポートは良好です。old-IEを含むすべてのブラウザーで機能させるには、単純なAPIでラップする必要があります（新しいブラウザーはデータセットから読み取り、古いブラウザーは「data-XXX」属性の属性リストを読み取る必要があります-jQueryはこれをラップしますの中へ.data();

そしてもちろん、あなたはあなたのページにたくさんのアンカーを持っているかもしれません、そしてそれらのほんの一握りだけがあなたが今探していることをするつもりです......だからそれらをつかむためのトリックがありますあなたが彼らに与えるクラスによって、あなたがaページ上のすべてによってソートされないように。

...または、a特別な内部ページであるそれぞれがメニューdivや設定divなどに含まれていることがわかっている場合は、それらを取得します。

var menu = document.getElementById("myMenu"),
    jsLinks = menu.getElementsByTagName("a");

[].forEach.call(jsLinks, function (anchor) { /* everything mentioned before */ });
于 2012-10-02T20:10:49.077 に答える