Question

我想选择每个点击的正确项目，我已经写了这个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不起作用。你知道如何让它运作吗？

先谢谢

Answer 1

你不能写！jQuery（'。kspoiler-content'）。is（'：visible'） - 它什么都不选。也不需要使用$（每个）函数

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

Answer 2

我认为您不必再使用它们了，因为事件监听器已经附加到具有类.kspoiler的所有元素，因此您不必再迭代它们。而且，更好地使用jQuery别名$（除非您有其他可能使用$的库）。

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

Answer 3

每次为所有项目添加触发器时......

// 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() {
   /***/
});

（你需要做一个循环：）

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

对于你的情况也一样，你需要选择＆＃39; .kspoiler-content＆＃39;在当前点击：

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

jQuery选择右键单击每个项目

3 个答案: