无法获得jQuery点击以正确注册元素

Question

在这里看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();
                }
            });
        }
    });
});​

Answer 1

使用现有标记，您可以轻松地将点击注册替换为以下内容：

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

JSFIDDLE 示例

如果你想修复你的代码，你的一些选择器是相反的：

$(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 示例

Answer 2

我修复了它：

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

示范

您混淆了要单击的元素和要显示/隐藏的元素。

Answer 3

您正在将单击事件绑定到隐藏元素。您需要的是将单击处理程序绑定到..read morediv，并根据相应的部分可见性向上/向下滑动。

演示：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');
        }
    });

Answer 4

我认为这就是你要找的

$(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/