Question

在文本块中如果出现'###'，我想用图像替换它，之后的所有内容都应隐藏点击，一切淡入，添加另一个图像，隐藏阅读图像，点击无读图像，文本幻灯片和再读图像再次可见。

并且一切都按原样运行，只有一个元素，但应该有可能将###添加到不止一个元素，但是有一个问题：

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

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

这是我的js-code：

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

    }
})

Answer 1

改变这个：

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

对此：

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

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

Answer 2

使用现有代码，我能够修改它以适用于各个部分。

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

使用on()代理而非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');
})

DEMO

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

jquery为某些字符串添加读取更多内容

2 个答案: