什麼是分離JavaScript功能的最佳方式？

我有兩個相互衝突的javascript文件。一種是打開模式並使用像<a href="#modal" data-toggle="modal">open modal</a>這樣的鏈接，然後打開模式id="modal"。但另一個腳本是用於平滑滾動的，它會從url (I'd like to keep that part!)中刪除錨點，但在添加平滑滾動腳本後，模塊不起作用。任何想法如何解決它？什麼是分離JavaScript功能的最佳方式？

modal.js：

$(".modal-wide").on("show.modal", function() { 

    var height = $(window).height() - 200; 
    $(this).find(".modal-body").css("max-height", height); 
}); 
$('a[data-toggle="modal"]').bind('click',function(){ 
    $('.modal').modal('hide'); 
});

scroll.js：

$(function() { 
    $('a[href*="#"]:not([href="#"])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 500); 
     return false; 
     } 
    } 
    }); 
});

scroll.js來源：https://css-tricks.com/snippets/jquery/smooth-scrolling/

來源

2017-03-24 Volcan 3

它是自舉模式嗎？版本3？ – amenadiel

@amenadiel我真的不知道我從哪裏得到的模態代碼，但我相信它是從bootstrap 3.0是 –

嘗試增加您的具體HREF標記爲未選擇器的平滑滾動功能。

$('a[href*="#"]:not([href="#"]):not([href="#modal"])').click(function()

這是一個小提琴顯示smoothscroll只適用於平滑的滾動div應該保留您的模式功能。

https://jsfiddle.net/bryangators/wjgu1vL9/

來源

2017-03-24 18:03:54 bryangators55

嗯這是很好，但'href =「＃模式」'會打開一個模式，有id 'modal'。所以在這段代碼中，我必須將每個模式ID添加到'：not'部分。可以用'data-toggle =「modal」'來完成嗎？ –

ooh nvm。（'href =「＃」]）：not（[data-toggle =「modal」]）現在可以測試我自己，代碼現在可以使用$（'a [href * =「＃」]： '）.click（function（）{'。謝謝你的幫助:) –

你的歡迎。 – bryangators55

什麼是分離JavaScript功能的最佳方式？

回答

相關問題