Javascript jQuery选择右键单击的每个项目

我想选择正确的项目，每个项目都被点击，我已经编写了javascript代码，当我点击项目时它不工作，它什么也不做：

jQuery('.kspoiler').each(function() {

 jQuery('.kspoiler').click(function() {

        if ( !jQuery('.kspoiler-content').is(':visible') ) {

            jQuery(this).find('.kspoiler-content').show();

            jQuery(this).find('.kspoiler-expand').hide();

            jQuery(this).find('.kspoiler-hide').show();

        } else {

            jQuery(this).find('.kspoiler-content').hide();

            jQuery(this).find('.kspoiler-expand').show();

            jQuery(this).find('.kspoiler-hide').hide();

        }

    });

});

我的HTML代码如下所示：

   <div class="kspoiler">
    <div class="kspoiler-header">
        <span class="kspoiler-title">
            Warning: Spoiler!       </span>
        <span class="kspoiler-expand">
            [ Click to expand ]     </span>
        <span style="display:none" class="kspoiler-hide">
            [ Click to hide ]       </span>
    </div>
    <div class="kspoiler-wrapper"><div style="display:none" class="kspoiler-content">
            my content      </div>
    </div>
    </div>

警告：扰流板！
[单击展开]
[单击以隐藏]
我的内容

它可能在页面中比在下面显示的HTML代码中更多，下面显示的我的javascript不起作用。你知道如何使它工作吗

---

提前感谢

您为所有项目添加了一个触发器，每次它们

// Loop for all '.kspoiler'
jQuery('.kspoiler').each(function() {
   // Add a trigger for all '.kspoiler'   
   jQuery('.kspoiler').click(function() {
       /***/
   });
});

尝试删除无用的循环：

// Add a trigger for all 
jQuery('.kspoiler').click(function() {
   /***/
});

（使用需要执行的循环：）

这与“为您着想”条件相同，您需要在当前单击的页面上选择“.kspoiler内容”：

if(jQuery(this).find('.kspoiler-content').is(':hidden') ))

你不会写字！jQuery（'.kspoiler content'）。是（':visible'）-它是不选择任何内容。也不需要使用$（每个）函数

---

我认为您不必再使用每个元素，因为事件侦听器已经通过class

.kspoiler

连接到所有元素，因此您不必再对它们进行迭代。另外，最好使用jQuery别名

$

（除非您有其他库可能正在使用

$

）

---

是的，如果他使用另一个也使用$的库（比如MooTools），他必须这样做，但他可以这样做：jQuery（document）.ready（函数（$）{//像往常一样使用$的代码放在这里。}）；现在的问题是：jQuery（this.find（'.kspoiler hide'）.show（）；不做任何事情这样要好一点，但是要显示或隐藏的三个项目没有改变：jQuery（this）.find（'.kspoiler hide'）.show（）；

if(jQuery(this).find('.kspoiler-content').is(':hidden') ))

$('.kspoiler').click(function() {
    if ($(this).is(':hidden')) {
    $(this).find('.kspoiler-content').show();
    $(this).find('.kspoiler-expand').hide();
    $(this).find('.kspoiler-hide').show();
  } else {
    $(this).find('.kspoiler-content').hide();
    $(this).find('.kspoiler-expand').show();
    $(this).find('.kspoiler-hide').hide();
  }
});

$('.kspoiler').click(function() {
  // click event handler
  // $(this) refers to the clicked element
});