JQuery給loop 元素的button綁定click事件被多次執(zhí)行

需求

Read More & Read Less 做手風(fēng)琴功能

問題

Read More Button 的點擊一次，全部Loop more 展開

我嘗試過的方法(都不成功)

off('click')
unbind('click')
.one('click')
循環(huán)做閉包處理
把onClick 事件單獨做成一個function

我希望得到的結(jié)果

只對current target 起作用，而不是點擊某一個click事件，全部button都響應(yīng)

以下是我把on click 事件抽離后的代碼

HTML

<div class="card">
    <div class="card-block flexLayout">

        <div class="imgContent">
            <img src="$ThemeDir/images/aaron-kitto-hs.png" alt="">
        </div>

        <div class="itemPresenterContent">
            <h2>Aaron</h2>

            <div class="textBox">
                <p>
                        malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
                        malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
            malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
                        malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
                        malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
                        malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultric
                </p>
            </div>

            <button class="read-more">
                Read More
                <i class="fa fa-angle-double-down"></i>
            </button>
            
            <button class="read-less">
                Read Less
                <i class="fa fa-angle-double-up"></i>
            </button>
            <span class="cleanFloat"></span>
        </div>
    </div>
</div>

JS

    var originHeight = $(".read-less, .read-more").parents().find('.textBox').height();
    /* toggle read more or less */
    function toggleMoreOrrLess(btn) {

        $(btn).on('click', function () {
            console.log('test');
            var extendHeight = $(this).parents().find('.textBox > p').height(),
                height = $(this).attr('class').indexOf('read-less') != -1  ? originHeight : extendHeight;

            $(this).parents().find(".textBox").animate({
                "height": height
            });

            $(this).hide();
            $(this).attr('class').indexOf('read-less') != -1 ?  $('.read-more').show() : $('.read-less').show();

            return false;
        })

    };

    for (var i = 0; i< $('.itemPresenter button').length; i++) {
        toggleMoreOrrLess($('.itemPresenter button')[i]);
    }

在function 中設(shè)置了一個打印，點擊一次，也就是只打印一次。打印$(this)也是當(dāng)下的元素。
我現(xiàn)在有點暈了。大神們能否提供一個解決方法以及原因？

回答

編輯回答

傲寒

你的按鈕是有兩次作用所以你可以用發(fā)父級元素去監(jiān)聽事件的操作就是addeventlistern

2017年3月10日 14:33

編輯回答

別逞強

老生常談。
要事件代理，不要循環(huán)綁定，綁定也不要寫在function里。有循環(huán)綁定，就可能會出現(xiàn)循環(huán)執(zhí)行，然而這個循環(huán)根本沒必要。

補充下代碼，原有HTML不動，CSS補充（僅為示意，具體樣式?jīng)]摳）：

.textBox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all .6s;
}

.less .textBox {
    height: 30%;
}

.read-less,
.read-more {
    position: relative;
}

.read-less,
.less .read-more {
    display: block;
}

.read-more,
.less .read-less {
    display: none;
}

然后js只需要：

$('.card').on('click', 'button', function(){
    $('.card').toggleClass('less');
});

主要就是在css里用transition控制動畫，在父類里直接加減類名控制里邊的樣式，然后js只要操作（切換）類名就行了。

2018年3月23日 02:07

編輯回答

蔚藍(lán)色

謝謝各位，問題已經(jīng)解決。bug 來源是 $(target).parents(),這一句將render范圍擴大至最外層的包圍。所以導(dǎo)致問題出現(xiàn)。我也是疾病亂投醫(yī)的認(rèn)為是要loop產(chǎn)生的button導(dǎo)致的問題。后經(jīng)熊貓桑提醒，最終確定了bug出處。

2018年5月6日 06:52

編輯回答