jQuery - 仅执行一次

Question

我想检查一个元素是否有类名.active，如果有，则添加: margin-top: 4px;

但是我只想让这个操作在页面加载时发生一次，一旦检测到该类名，就不想再次检测并添加CSS样式。

当特定元素被悬停时应用此类名。

在jQuery中是否可行？

- CLiown

Answer 1

查看one事件。以下是文档中的示例：

$('#foo').one('click', function() {
  alert('This will be displayed only once.');
});

- karim79

---

我认为 "one" 不能解决danits的问题。可以将其绑定到“文档准备就绪”吗？ - hunter

@Hunter - 原帖中说：“当鼠标悬停在特定元素上时，应用此类。”这让我相信他想让某些元素仅触发一次mouseover事件。当然我也可能错了，在这种情况下，你的答案可能是正确的。 - karim79

Answer 2

这将在页面加载时触发一次。

$(function(){ 
    if ($("#elementid").hasClass("active"))
    {
        $("#elementid").css("margin-top", "4px");
    }
});

- hunter

---

我认为在这种情况下，“one”是不必要的。使用这个解决方案将会起作用 --- document.ready只会触发一次。 - macca1

Answer 3

我通常做的方法是：

(function($) {

  // my custom function to process elements
  function myProcessFunction(context) {

    // get context    
    context = context || document;

    // select elements within the context, filter out already processed ones
    // loop through remained (unprocessed) elements
    // '.my-class' - selector for the elements I want to process
    $('.my-class:not(.my-class-processed)', context).each( function(i.e){

      // mark the element as processed
      $(e).addClass('my-class-processed');

      // add process code here 

    });
  }

  // run myProcessFunction on document.ready 
  $(document).ready( function(){
    myProcessFunction();
  });

})(jQuery);

这样我就有了以下优势：

• 可重复使用的函数
• 已处理的元素会被标记，并在下一次调用该函数时不再被处理
• 如果指定了上下文（例如通过 AJAX 请求返回的 HTML 代码），则仅在上下文中处理元素

希望这有所帮助。

- Eugene Kubovsky