-1

私は完全に機能している機能を持っています。現在、クライアントの要件は、js に他のファイルを使用したくないということです。そのため、この関数を純粋な JavaScript、つまり jQuery を使用しないものに変更しました。私はどこから始めるべきか混乱しています。

jQueryの.sizeメソッドに似たJavaScript関数を教えてください。

http://jsfiddle.net/CgDS6/8/

    <div class="wrap">
        <ul>
            <li>
                <div class="first">
                    <div class="second"></div>
                </div>
            </li>
            <li>
                <div class="first">
                    <div class="active"></div>
                </div>
            </li>
            <li>
                <div class="first">
                    <div class="second"></div>
                </div>
            </li>
        </ul>
        <a href="#" id="next">Next</a>
    </div>

var $firstSecond = $('.second').eq(0);
$('#next').click(function() {
    var $active = $('.active');
    var $nextSecond = $active.closest('li').next().find('.second');
    $active.toggleClass('active second');
    if ($nextSecond.size() != 0) {
        $nextSecond.toggleClass('second active');
    } else {
        $firstSecond.toggleClass('second active');
    }
});
4

5 に答える 5

2

これは IE6+ でサポートされています。イベント ハンドラーを使用してこれを行うこともできますが、クロス ブラウザーのイベント ハンドラーを実装したくなかったので、次のようにすばやく汚い方法で行うことにしましたonclick。

function getElementsByClassName(cn, rootNode) {
  if (!rootNode) {
    rootNode = document;
  } 
  for (var r=[], e=rootNode.getElementsByTagName('*'), i=e.length; i--;) {
    if ((' '+e[i].className+' ').indexOf(' '+cn+' ')>-1) {
      r.push(e[i]); 
    }
  }
  return r;  
}

document.getElementById('next').onclick = function(){
    var active = getElementsByClassName('active')[0],
        lis = getElementsByClassName('wrap')[0].getElementsByTagName('li'),
        nextSecond;

    for (var i = 0, il = lis.length; i < il; i++) {
        if (getElementsByClassName('active', lis[i]).length) {
            nextSecond = i + 1 < il ?
                         getElementsByClassName('second', lis[i + 1])[0] :
                         getElementsByClassName('second', lis[0])[0]
        }
    }

    active.className = 'second';
    nextSecond.className = 'active';
};

ここにフィドルがあります

于 2012-07-17T15:33:01.257 に答える
1

純粋なjavascriptでの解決策は次のとおりです。

document.getElementById('next').onclick =  function() {
   var divs = document.getElementsByClassName('second');
   var active = document.getElementsByClassName('active')[0];

   for(var i = 0; i < divs.length; i++) {
     if(divs[i]==active) divs[i].className = 'second';
     if(divs[(i)%divs.length] == active) divs[(i+1)%divs.length].className = 'second active';
   }    
}

JSFIDDLE

于 2012-07-17T15:28:10.447 に答える
0

まず、jQuery DOMで選択されたオブジェクトは配列であるため、JavascriptでjQueryオブジェクトのサイズを設定する特定の場合sizeのメソッドに相当するものはです。length

jQueryのソースコードを見て、jQueryを機能させるためにJavaScriptで何をしているのかを確認できます。Command-Fは、すべての異なるコマンドとすべてを検索します。

クライアントが縮小したいファイルのサイズとほぼ同じである場合は、ファイルにjQueryソースコードをコピーします。また、開発環境にさまざまなファイルを保持し、それらをすべて一緒にコピーして、本番環境で使用するために縮小することもできます。これは一般的な方法であるため、両方の長所を活用できます。

于 2012-07-17T15:21:00.467 に答える
0

http://jsfiddle.net/DQSna/3/

var firstSecond = document.querySelector(".second");

document.querySelector("#next").addEventListener("click", function() {


    function toggleClasses( node ) {
        node.classList.toggle("active");
        node.classList.toggle("second");    
    }

    var active = document.querySelectorAll(".active"),
        nextSecond = [].map.call( active, function( node ) {
            while (node && node.nodeName.toLowerCase() !== "li") {
                 node = node.parentNode;   
            }
            return node && node.nextElementSibling && node.nextElementSibling.querySelector( ".second" ) || null;
        }).filter(Boolean);

        [].forEach.call( active, toggleClasses );

        if( nextSecond.length ) {
            [].forEach.call( nextSecond, toggleClasses );
        }
        else {
            toggleClasses( firstSecond );
        }
}, false );​
于 2012-07-17T15:25:01.260 に答える
0

プレーン DOM メソッドの jQuery (それらのほとんどは IE でサポートされないことに注意してください):

var firstSecond = document.querySelector(".second'");
document.getElementById("next").addEventListener("click", function(e) {
    var active = document.querySelector(".active"),
        nextSecond = active.parentNode.parentNode.nextElementSibling.querySelector(".second");
    active.classList.remove("active");
    active.classList.add("second");
    (nextSecond || firstSecond).classList.remove("second");
    (nextSecond || firstSecond).classList.add("active");
}, false);

firstSecondこれには、#nextおよび要素activeが常に検出される必要があることに注意してくださいnull。

次の場合、DOM がよりクリーンになる (そして JS がよりシンプルになる) 可能性があります。

  • IDとして使用activeします。一意だと思います（要素の選択が簡単になるだけです）
  • s 自体をアクティブとして設定しliます。ステートはブランチ全体でカウントされると思います (したがって、より多くのスタイリングが可能になります)。
  • seconddivからクラスを削除しません-それらはまだ2番目です（そしてアクティブです）
  • firstandクラスはまったく使用しません。通常の CSS セレクター ( and )secondでこれらの div を選択できます。li > divli > div > div
于 2012-07-17T15:25:45.427 に答える