jquery点击发射所有元素

我试图使用Bootstrap的折叠功能与自定义图标从字体真棒。我能够崩溃工作，但我遇到的问题是所有的图标都是由Jquery的点击触发的，我想扩大这个范围，因为在任何时候“容器”的数量都可以改变。任何建议表示赞赏。jquery点击发射所有元素

$(document).ready(function() { 
    $faChevronDown = $('.fa-chevron-down'); 
    var z = 0; 
    $faChevronDown.click(function() { 
     if (z == 0) { 
      turnUp(); 
      z++; 
     } else { 
      turnDown(); 
      z = 0; 
     } 
    }); 
}); 

function turnUp() { 
    $faChevronDown.removeClass('fa-chevron-down'); 
    $faChevronDown.addClass('fa-chevron-up'); 
}; 

function turnDown() { 
    $faChevronDown.removeClass('fa-chevron-up'); 
    $faChevronDown.addClass('fa-chevron-down'); 
};

JS Fiddle

谢谢编辑：谢谢你的伟大的答案！仅适用于开关类fa-chevron-down和fa-chevron-up，该代码

$(document).ready(function() { 
    var z = 0; 
    $("body").on("click", ".fa-chevron-down", function() { 
     if (z == 0) { 
      turnUp.call(this); 
      z++; 
     } else { 
      turnDown.call(this); 
      z = 0; 
     } 
    }); 
}); 

function turnUp() { 
    $(this).removeClass('fa-chevron-down'); 
    $(this).addClass('fa-chevron-up'); 
}; 

function turnDown() { 
    $(this).removeClass('fa-chevron-up'); 
    $(this).addClass('fa-chevron-down'); 
};

如果您正在使用z变量：一个.fa-chevron-down元素的父元素，或者如果父元素没有body元素称为

来源

2015-03-31 Mintberry

我已经简化为你：https://jsfiddle.net/74t2jLcu/8/ – 2015-03-31 16:32:22

我不知道你的z变量的点是什么，但可以减少你所拥有的，并且通过使用this固定不引用元素的问题，仅仅通过使用：

$(document).ready(function() { 
    $('.fa-chevron-down').click(function() { 
     $(this).toggleClass('fa-chevron-down fa-chevron-up') 
    }); 
});

jsFiddle example

来源

2015-03-31 16:32:00 j08691

谢谢，效果很好！编辑 - 我正在使用.toggle，直到我经历了“为什么一切隐藏，哦，它已被弃用！”循环。我会在4分钟内接受答案，看起来是最有效的方式！ – Mintberry 2015-03-31 16:32:35

如果页面加载时由于某种原因（来自角度等的触发器）出现V形图案，该不会中断吗？编辑：是的！编辑：改为.fa - 修复它。我可能会使用元素选择器，因为我在其他位置也使用了V形。 – Mintberry 2015-03-31 16:37:27

设置单击处理程序可以简化为：

$(document).ready(function() { 
    $("body").on("click", ".fa-chevron-down", function() { 
     $(this).toggleClass('fa-chevron-down fa-chevron-up'); 
    }); 
});

来源

2015-03-31 16:26:02

谢谢您的输入，不会引起这个问题时调低函数被调用？点击可能会停止工作，因为.fa-chevron-down被选中并且不可用。 – Mintberry 2015-03-31 16:30:48

@Dnwebdev请检查更新的答案 – 2015-03-31 16:33:05

谢谢，现在就像一个魅力！ – Mintberry 2015-03-31 16:34:22

您可以将元素传递给执行粒度来回切换，

$(document).ready(function() { 
    $fa= $('.fa'); 
    var z = 0; 
    $fa.click(function() { 
     if (z == 0) { 
      turnUp($(this)); 
      z++; 
     } else { 
      turnDown($(this)); 
      z = 0; 
     } 
    }); 
}); 

function turnUp(el) { 
    el.removeClass('fa-chevron-down'); 
    el.addClass('fa-chevron-up'); 
}; 

function turnDown(el) { 
    el.removeClass('fa-chevron-up'); 
    el.addClass('fa-chevron-down'); 
};

来源

2015-03-31 16:28:08 ferr

感谢您的意见，这似乎工作，直到你关闭一个，然后打开另一个，我相信选择器之后失去。 – Mintberry 2015-03-31 16:32:03

我看到了，你正在移除fa-chevron-down类，它是click事件绑定的地方。我会建议绑定一个你正在添加/删除的类。您可以绑定到.fa并继续在别处使用V形类。我会更新。 – ferr 2015-03-31 16:35:37

你点击只有一个元素，但你的功能就是把所有的图标，你必须使用$（本）中，而不是为了只更改图标你点击：

function toggleClass() { 
    $(this).toggleClass('fa-chevron-down fa-chevron-up'); 
};

，然后只用一个功能：

$faChevronDown.click(toggleClass);

有了这个，您可以避免使用Ifs和elses，代码更简单和小巧。

来源

2015-03-31 16:28:33 taxicala

jquery点击发射所有元素

回答

相关问题