1

在文本块中，如果出现“###”，我想用图像替换它，之后的所有内容都应在单击时隐藏，一切都会淡入，添加另一个图像，阅读更多图像被隐藏并单击无读图像, text slidesup 和 readmoreimage 再次可见。

这是一个例子：http: //jsfiddle.net/TkPt6/7/

并且只有一个元素可以正常工作，但是应该可以将###添加到多个元素，但是有一个问题：

http://jsfiddle.net/TkPt6/6/

如何应用它只影响应该受影响的元素？

顺便说一句，如何编写更好的代码？

那是我的js代码：

$('div.ce_text p').each(function() {
    if($(this).text().indexOf("###") > -1) {
        var readmore = '<p class="more">more</p>';
        var readmoreselector = 'p.more';
        var readless = '<p class="less">less</p>'
        var readlessselector = 'p.less';

        $(this).nextAll().wrapAll('<div class="more_content">');
        $(this).replaceWith(readmore);

        var hiddentext = $('div.more_content');
        $(hiddentext).append(readless);
        $(readmoreselector).click(function(){
            $(hiddentext).slideDown('slow');
            $(readmoreselector).css('display','none');
        })
        $(readlessselector).click(function(){
            $(hiddentext).slideUp('slow');
            $(readmoreselector).css('display','block');
        })            

    }
})
4

2 回答 2

0

改变这个： 

$(hiddentext).slideDown('slow');

对此：

$(this).next().slideDown('slow');

演示：http: //jsfiddle.net/TkPt6/9/

于 2013-03-15T20:40:22.900 回答
0

使用您现有的代码，我可以对其进行修改以适用于各个部分。

此外，您还有一个逻辑错误，即less每次迭代都将其添加到每个部分，这会导致它被多次添加到已完成的任何先前部分。

使用on()with delegateclick可以将 click 事件绑定移动p.more到p.less每个循环之外。

更新click事件以使用当前范围仅影响与当前相关的元素。

$('div.ce_text p').each(function () {
    var $this = $(this); // cahced $(this);

    if ($(this).text().indexOf("###") > -1) {
        var readmore = '<p class="more">more</p>';
        var readmoreselector = 'p.more';
        var readless = '<p class="less">less</p>'
        var readlessselector = 'p.less';

        $this.siblings().last().after(readless); // fixed the issue of duplicated less
        $this.nextAll().wrapAll('<div class="more_content">');
        $this.replaceWith(readmore);
    }
})

// moved this outside the each as those can be bound using `on` with delegation
$('div.ce_text').on('click', 'p.more', function () {
    $(this).next().slideDown('slow');
    $(this).css('display', 'none');
})

// moved this outside the each as those can be bound using `on` with delegation    
$('div.ce_text').on('click', 'p.less', function () {
    $(this).parent().slideUp('slow');
    $(this).closest('div.ce_text').find('p.more').css('display', 'block');
})

演示

我确信有很多方法可以做到这一点，但我尝试尽可能多地使用您现有的代码。

于 2013-03-15T20:45:32.077 回答