不能讓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的點擊上的元素註冊正確

回答

相關問題