0

このjQueryコードをスタンドアロンのJavaScriptとして実行することは可能ですか？これは私のプロジェクトで使用したい唯一のJavaScriptなので、この1kスクリプトのためだけにjqueryライブラリ全体をロードしたくないのです。

//chris coyier's little dropdown select-->

$(document).ready(function() {

//build dropdown
$("<select />").appendTo("nav.primary");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");  

// Populate dropdowns with the first menu items
$("div#brdmenu ul li a").each(function() {
    var el = $(this);
    $("<option />", {
        "value"   : el.attr("href"),
        "text"    : el.text()
    }).appendTo("nav.primary select");
});

//make responsive dropdown menu actually work           
$("nav.primary select").change(function() {
    window.location = $(this).find("option:selected").val();
});

});

私は以前の答えを見つけようとしましたが、ほとんどの質問はjqueryに変換するためのものであり、その逆ではありません:)

4

3 に答える 3

2

ストレートJavaScriptでこれらのことを行うことは明らかに可能ですが、その変換を自動的に行う方法はありません（私が知っていることです）。行ごとに調べて、自分で変換を行う必要があります。

于 2012-10-18T01:36:03.347 に答える
1

これを試してみてください。

私が省略しているのは$（document）.readyですが、stackoverflowで利用できるソリューションはたくさんあります。驚くほど大量のコードです！

しかし、他の機能：

// build the dropdown
var selectElement = document.createElement('select');
var primary = document.getElementsByClassName('primary')[0];

// create a default option and append it.
var opt = document.createElement('option');
var defaultOpt = opt.cloneNode(false);
defaultOpt.selected = true;
defaultOpt.value = "";
defaultOpt.text = "Go to...";
selectElement.appendChild(defaultOpt);

// populate the dropdown
var brdmenuUl = document.getElementById('brdmenu').getElementsByTagName('ul')[0];
var listItems = brdmenuUl.getElementsByTagName('li');
for(var i=0; i<listItems.length; i++){
    var li = listItems[i];
    var a = li.getElementsByTagName('a')[0];
    var newOpt = opt.cloneNode(false);
    newOpt.value = a.href;
    newOpt.text = a.innerHTML;
    selectElement.appendChild(newOpt);
}

// now listen for changes
if(selectElement.addEventListener){
    selectElement.addEventListener('change', selectJump, false);
}
else if(selectElement.attachEvent){
    selectElement.attachEvent('change', selectJump);
}

function selectJump(evt){
    window.location = evt.value;
}

primary.appendChild(selectElement);​

いくつかのメモ！

  1. 特にnav.primaryを探しているのではなく、クラス.primaryを持つ何かの最初の出現を見つけているだけです。最高のパフォーマンスを得るには、その要素にIDを追加し、代わりにgetElementByIdを使用する必要があります。

  2. #brdmenuのリストと同様に、各LI内で最初のULと最初のAを探します。これはjQueryが行うこととは異なります。＃brdmenu内で複数のULを繰り返す必要がある場合は、別のforループを使用できます。

私はそれがすべてうまくいくはずだと思います、ここにフィドルがあります

于 2012-10-18T02:03:06.490 に答える
1

これは市場の答えに似たものです。brdmenu要素内のUL要素のすべてのリンクを取得したいとします。LI要素の最初のリンクのみが必要な場合は、それらを取得するループを調整するだけです。

また、これは良い考えではありません。リンクにselect要素を使用することは、かなり前に時代遅れになり、ユーザーは実際のリンクを非常に好みます。また、IEでカーソルキーを使用してオプションをナビゲートする場合、異なるオプションが選択されるたびに変更イベントがディスパッチされるため、ユーザーはその場所に移動する前に次のオプションのみを選択できます。場所を選択した後に押す「実行」ボタンを追加する方がはるかに優れています。

主な変更点は、IDを使用してnav.primary要素を取得することです。これは、すでにIDで取得しているはずの単一の要素であると思います。

function doStuff() {

    function getText(el) {
      return el.textContent || el.innerText;
    }
    var div, link, links, uls;

    // Use an ID to get the nav.primary element
    var navPrimary = document.getElementById('navPrimary');

    // Create select element and add listener
    var sel = document.createElement('select');
    sel.onchange = function() {
      if (this.selectedIndex > 0) {  // -1 for none selected, 0 is default
        window.location = this.value;
      }
    };

    // Create default option and append to select
    sel.options[0] = new Option('Go to...','');
    sel.options[0].setAttribute('selected','');

    // Create options for the links inside #brdmenu
    div = document.getElementById('brdmenu');
    uls = div.getElementsByTagName('ul');

    for (var i=0, iLen=uls.length; i<iLen; i++) {
      links = uls[i].getElementsByTagName('a');

      for (var j=0, jLen=links.length; j<jLen; j++) {
        link = links[j];
        sel.appendChild(new Option(getText(link), link.href));
      }
    }

    // Add select to page if found navPrimary element
    if (navPrimary) {
      navPrimary.appendChild(sel);
    }
}

window.onload = doStuff;

実際のコードはわずか28行で、元のコードより10行多いだけで、サポートライブラリは必要なく、使用中のどのブラウザでも機能するはずです（ほとんどの場合はそうではありません）。

于 2012-10-18T04:29:47.030 に答える