Question

我想要实现的目标是 - 当用户点击“阅读更多”链接时：

已删除
将其标签更改为“少阅读”
这个新的“少读”链接被添加到它的父元素的下一个元素中（readmore_holder）
显示“readmore_holder”;

然后应该有另一部分“少阅读”再次交换链接并隐藏readmore_holder，但由于我甚至无法让alert()出现，我有点失落。

这里有什么问题？

P.S。如果有简化此代码段的方法，我会非常感激。

提前致谢！

编辑：来自jsFiddle示例的代码。

$('.readmore_holder').hide();
$('.readmore_holder').prev().append(' <a href="javascript:void(0);" class="toggleon">read-more</a>');

$('.toggleon').click(function() {     
    $(this).parent().next().append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>');
    $(this).parent().next().fadeIn();        
    $(this).remove();        
});

$('.toggleoff').click(function() {
    alert('works!');
});

HTML

<p>Headline is right here</p>
<p class="readmore_holder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget suscipit ante. Pellentesque egestas varius dolor, sit amet blandit erat luctus quis. Nunc semper odio a orci vulputate ut pulvinar mi consequat. Praesent molestie accumsan velit, nec vehicula velit mattis vitae. Proin libero mauris, ultrices eu congue quis, sollicitudin et eros. Phasellus tortor mauris, imperdiet in euismod ut, tempor id ante.</p>

Answer 1

您需要对动态生成的内容使用live()方法。 See the working demo here

Answer 2

它不起作用，因为当您尝试将click事件绑定到它们时，toggleoff元素尚不存在。

从头开始创建toggleoff元素：

$('.readmore_holder').hide();
$('.readmore_holder').prev().append(' <a href="javascript:void(0);" class="toggleon">read-more</a>');
$('.toggleon').parent().next().append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>');

$('.toggleon').click(function() {     
    $(this).parent().next().fadeIn();        
    $(this).hide();        
});

$('.toggleoff').click(function() {
    alert('works!');
});

我还将remove更改为hide以删除read-more链接。这样，您可以在隐藏文本时显示它，而不是重新创建它。

Answer 3

非常简单的错误：当你为“少读”分配点击处理程序时，它还不存在，因此没有分配。只需将分配移动到单击处理程序中即可。

稍微清理一下代码，看看：

$('.readmore_holder').hide().prev().append(' <a href="javascript:void(0);" class="toggleon">read-more</a>');

$('.toggleon').click(function()
{     
    $(this).parent().next().fadeIn();        

    $(this).parent().next().append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>').click(function() {
        alert('works!');
    });
    $(this).remove();
});

Answer 4

这是我的建议。 不要删除链接。只需更改文本并修改代码即可处理这两种情况。

这会更有效率。

示例： http://jsfiddle.net/M6xdq/14/

$('.readmore_holder').hide()

    .prev().append(' <a href="javascript:void(0);" class="toggle">read-more</a>')

    .find('.toggle').click(function() {
        $(this).text(function(i,txt) { 
           var more = (txt === 'read-more');
            if(more)
                $(this).parent().next().append(this).fadeIn();
            else
                $(this).parent().fadeOut().prev().append(this);
            return (more) ? 'read-less' : 'read-more'; 
        });       
    });

或者这两个链接都是创建的，并使用.show()和.hide()。这两种解决方案都比破坏和创建相同的元素更可取。

示例： http://jsfiddle.net/M6xdq/15/

$('.readmore_holder').hide()
        .append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>')
        .find('.toggleoff')
        .click(function() {
             $(this).hide().parent().fadeOut().prev().find('.toggleon').show();
        })

        .parent().prev()
        .append(' <a href="javascript:void(0);" class="toggleon">read-more</a>')
        .find('.toggleon')
        .click(function() {
             $(this).hide().parent().next().fadeIn().find('.toggleoff').show();
        });

Answer 5

也许你可以尝试以不同的方式。 jQuery .toggle()函数可以使用2（甚至3）个函数处理程序作为参数。第一次单击后，调用第一个函数，第二次单击后，调用第二个函数。所以你可以这样做：


<style>
.readmore_holder { display: none; }
</style>
...
<p>head line</p>
<p class="readmore_holder">some text</p>
<a href="javascript:void(0)" class="toggle">read more</a>

<script type="text/javascript">
$("a.toggle").toggle(function(){
  $(this).html("hide");
  $(this).prev("p").show();  //for better effect you can use slideDown() here
}, function(){
  $(this).html("read more");
  $(this).prev("p").hide();  //for better effect you can use slideUp() here
});
</script>

.click（）事件未执行

5 个答案: