javascript - 如何将相同的功能应用于两个按钮？

Question

我的网站元素中有 JavaScript 代码。它适用于一个按钮，但也应该对第二个按钮执行相同的操作。它应该使用两个按钮执行相同的功能。怎样才能做到呢？ This is my website and I want right button work

After first button worked

这是第一个按钮 html 代码...

<div class="tablo_area-left">
    <h2>RULO AÇMA BOY KESME MAKİNELERİ</h2>
    <p>
        1,50 mm'den 25.00 mm'ye kadar her tür kalite sıcak ve dekape(RP) grubu malzemeler istenilen her boyda kesilerek servise sunulmaktadır. 0,50 mm'den 3,00 mm'ye kadar tüm soğuk ve galvaniz grubu malzemeler özenle istenilen boyda kesilmekte ve itina ile paketleme yapılmaktadır.
    </p>
    <div class="morph-button morph-button-overlay morph-button-fixed">
        <button type="button">Daha Fazla Bilgi</button>
        <div class="morph-content">
            <div class="content-style-overlay">
                <span class="icon icon-close">X</span>
                   </div>
            <!-- overlay content end -->
        </div>
        <!-- morph content end -->
    </div>
    <!-- morph-button -->
</div>
<!-- table_area-left end -->

这是第二个按钮的 html 代码...

 <div class="tablo_area-right">
    <h2>RULO AÇMA BOY KESME MAKİNELERİ</h2>
    <p>
        1,50 mm'den 25.00 mm'ye kadar her tür kalite sıcak ve dekape(RP) grubu malzemeler istenilen her boyda kesilerek servise sunulmaktadır. 0,50 mm'den 3,00 mm'ye kadar tüm soğuk ve galvaniz grubu malzemeler özenle istenilen boyda kesilmekte ve itina ile paketleme yapılmaktadır.
    </p>
    <div class="morph-button morph-button-overlay2 morph-button-fixed">
        <button type="button">Daha Fazla Bilgi</button>
        <div class="morph-content">
            <div class="content-style-overlay2">
                <span class="icon icon-close">close</span>
                <div id="table_right">
                    <p>Show in page....</p>
                </div>

            </div>
            <!-- overlay content end -->
        </div>
        <!-- morph content end -->
    </div>
    <!-- morph-button -->

</div>
<!-- Table area right end-->

还有 JavaScript 代码...

(function () {
    var docElem = window.document.documentElement, didScroll, scrollPosition;

    // trick to prevent scrolling when opening/closing button
    function noScrollFn() {
        window.scrollTo(scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0);
    }

    function noScroll() {
        window.removeEventListener('scroll', scrollHandler);
        window.addEventListener('scroll', noScrollFn);
    }

    function scrollFn() {
        window.addEventListener('scroll', scrollHandler);
    }

    function canScroll() {
        window.removeEventListener('scroll', noScrollFn);
        scrollFn();
    }

    function scrollHandler() {
        if (!didScroll) {
            didScroll = true;
            setTimeout(function () { scrollPage(); }, 60);
        }
    };

    function scrollPage() {
        scrollPosition = { x: window.pageXOffset || docElem.scrollLeft, y: window.pageYOffset || docElem.scrollTop };
        didScroll = false;
    };

    scrollFn();

    var el = document.querySelector('.morph-button');

    new UIMorphingButton(el, {
        closeEl: '.icon-close',
        onBeforeOpen: function () {
            // don't allow to scroll
            noScroll();
        },
        onAfterOpen: function () {
            // can scroll again
            canScroll();
            // add class "noscroll" to body
            classie.addClass(document.body, 'noscroll');
            // add scroll class to main el
            classie.addClass(el, 'scroll');
        },
        onBeforeClose: function () {
            // remove class "noscroll" to body
            classie.removeClass(document.body, 'noscroll');
            // remove scroll class from main el
            classie.removeClass(el, 'scroll');
            // don't allow to scroll
            noScroll();
        },
        onAfterClose: function () {
            // can scroll again
            canScroll();
        }
    });
})();

Answer 1

我只是命名 JavaScript 函数:

function buttonClick() { //do button actions }

然后从两个按钮的 onClick 属性中调用它:

<button type="button" onClick="buttonClick();">Daha Fazla Bilgi</button>