Question

我的网站项目中有JavaScript代码。它适用于一个按钮，但它也应该为第二个按钮做同样的事情。它应该使用两个按钮执行相同的功能。怎么办？ This is my website and I want right button work

这是第一个按钮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>

Answer 2

querySelector将匹配与选择器匹配的 first 元素。

如果要匹配多个元素，请使用querySelectorAll，它将返回包含所有匹配元素的NodeList（类似于数组）。 You can then loop over it并将您的代码依次应用于每个元素。

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

2 个答案: