javascript - Jquery 函数到 javascript 函数

Question

我有功能可以正常工作。现在客户的要求是他不想为js使用任何其他文件，所以我把这个函数改成纯JavaScript，即没有jQuery。我很困惑从哪里开始。

你们能告诉我一个类似于 jQuery.size方法的 JavaScript 函数吗？

    <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');
    }
});

score 2 · Accepted Answer

这在 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';
};

这是一个小提琴

score 1 · Accepted Answer

这是纯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

score 0 · Accepted Answer

首先，在您的特定情况下，在 Javascript 中调整 jQuery 对象大小的size方法等效于，因为 jQuery DOM 选择的对象是数组。length

您可以查看jQuery 源代码以了解他们在 javascript 中所做的工作以使 jQuery 工作。Command-F 将为您找到所有不同的命令。

如果只是客户端想要减小的文件大小，请复制文件中的 jQuery 源代码。您还可以在开发环境中保留不同的文件并将它们全部复制并缩小以供生产使用，这是一种常见的做法，因此您可以两全其美。

score 0 · Accepted Answer

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 );

score 0 · Accepted Answer

您在普通 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。

当您：

将active用作 id，我猜它是唯一的（这只会使选择元素更容易）
会将lis 本身设置为活动状态，我猜该状态对整个分支都很重要（因此允许更多样式）
不会second从 div 中删除该类-它们仍然是第二个（并且是活动的）
根本不会使用firstand类 - 您可以使用普通 CSS 选择器（和）second选择那些 divli > divli > div > div

javascript - Jquery 函数到 javascript 函数

5 回答 5

这是一个小提琴

Related

Reference