Aynı işlevsellik iki düğme için nasıl uygulanır

Question

Web sitem için bir JavaScript kod var. Hazır ücretsiz JavaScript kodu kullanıyorum. Tek bir düğme için çalışıyor ama onu ikinci birine eklemek istiyorum ve ilkiyle aynı şekilde çalışmak istiyorum. This is my website and I want right button work

After first button worked

İşte

<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--> 

... İşte

<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 --> 

ikinci düğme html kodu ... İlk düğme html kodu ve JavaScript kodu ...

(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

Sadece JavaScript işlevi isim olacaktır:

function buttonClick() { //do button actions } 

ve sonra her iki düğme onClick özelliği içinden diyoruz: Bu geçerli bir yaklaşım olmakla birlikte

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