不能让jQuery的点击上的元素注册正确

我想要得到的的jsfiddle“更多”链接点击时滑下并显示被隐藏的内容，但我不能似乎获得正确注册的点击功能。我做了什么明显错误？

基本的HTML布局

<div id="wrapper"> 
    <div id="aHidden">some long text here</div> <!--defaulted hidden with css--> 
    <div id="aBtn" class="bio-readMore">read more...</div> 
</div>

这里就是我试图用这样做了jQuery：

$(document).ready(function() { 
    $("div").each(function(idx) { 
     if ($(this).hasClass('bio-readMore')) { 
      var thename = this.id.replace("Btn", "Hidden"); 
      var sel = "#" + thename; 
      $(sel).click(function() { 
       alert("running click for element with value " + this.id); 
       if ($(this).is(":hidden")) { 
        $(this).slideDown("slow"); 
       } else { 
        $(this).slideUp(); 
       } 
      }); 
     } 
    }); 
});

来源

2012-10-16 Mike Corcoran

我不明白背后'$逻辑（SEL） .click（function（）{if（$（this）.is（“：hidden”））{'：你认为你怎么点击一个隐藏的元素？ –

他们没有。当他们点击某个“阅读更多”div时，我需要展开一个与之相似的名称（aHidden代替aBtn）的div。 –

与您现有的标记，你可以很容易地用以下取代点击注册：

$(".bio-readMore").on("click", function(){ 
    $(this).prev().slideToggle(); 
});

jsfiddle example

如果你想修复你的代码中有一些你选择的逆转：

$(document).ready(function() { 
    $("div").each(function(idx) { 
     if ($(this).hasClass('bio-readMore')) { 
      var thename = this.id.replace("Btn", "Hidden"); 
      var sel = "#" + thename; 
      $(this).click(function() { //<--- On the <a/> not the hidden element 
       alert("running click for element with value " + this.id); 
       if ($(sel).is(":hidden")) { // <----you want to check the hidden not the <a/> 
        $(sel).slideDown("slow"); 
       } else { 
        $(sel).slideUp(); 
       } 
      }); 
     } 
    }); 
});

jsfiddle example

来源

2012-10-16 15:07:28

...太棒了！我会将此标记为答案，我可以（4分钟） –

+1非常优雅。 – Christoph

我固定它：

$("div").each(function(idx) { 
    if ($(this).hasClass('bio-readMore')) { 
     var thename = this.id.replace("Btn", "Hidden"); 
     var sel = "#" + thename; 
     console.log(sel); 
     $(this).click(function() { 
      if ($(sel).is(":hidden")) { 
       $(sel).slideDown("slow"); 
      } else { 
       $(sel).slideUp(); 
      } 
     }); 
    } 
});

demonstration

你w不会混淆点击的元素和显示/隐藏的元素。

来源

2012-10-16 15:02:43

他与id为 – Huangism

ahhhh，谢谢。这是有道理的，我正在墙上敲我的头，搞清楚我在哪里搞砸了！ –

您将点击事件绑定到隐藏元素。您需要的是基于相应部分的可见性，将点击处理程序绑定到div和slideUp/Down上的..read more。

DEMO：http://jsfiddle.net/5Hejm/15/

$('div.bio-readMore').click(function() { 
     var thename = this.id.replace("Btn", "Hidden"); 
     var $sel = $("." + thename); 
     var $this = $(this); 

     if ($sel.is(":hidden")) { 
      $sel.slideDown("slow"); 
      $this.text('...read less'); 
     } else { 
      $sel.slideUp(); 
      $this.text('...read more'); 
     } 

    });

来源

2012-10-16 15:08:16

我认为这是你在找什么

$(document).ready(function() { 
    $(".bio-readMore").click(function() { 
      if ($(this).prev().is(":hidden")) { 
        $(this).prev().slideDown("slow"); 
       $(this).text(" ...read less"); 
      } else { 
       $(this).prev().slideUp(); 
        $(this).text(" ...read more"); 
      } 
     }); 
});

的jsfiddle http://jsfiddle.net/5Hejm/31/

来源

2012-10-16 15:13:31 PRP

不，你让“阅读更多”的文字消失。 – j08691

检查更新 – PRP

不能让jQuery的点击上的元素注册正确

回答

相关问题