如何減少jQuery代碼

在此，我嘗試打開一個對話框，單擊按鈕。如何減少jQuery代碼

它，但工作好，我想減少這種代碼，因爲它看起來像相同的點擊功能

$(document).ready(function() { 
 
    $("#dialog_form_file").dialog({ 
 
    modal: true, 
 
    autoOpen: false, 
 
    title: "Help", 
 
    width: 450, 
 
    buttons: [{ 
 
     text: "OK", 
 
     click: function() { 
 
      $(this).dialog("close"); 
 
     } 
 
     }, 
 
     { 
 
     text: "Cancel", 
 
     click: function() { 
 
      $(this).dialog("close"); 
 
     } 
 
     } 
 
    ] 
 
    }); 
 
    $("#dialog_form").dialog({ 
 
    modal: true, 
 
    autoOpen: false, 
 
    title: "Help", 
 
    width: 450, 
 
    buttons: [{ 
 
     text: "OK", 
 
     click: function() { 
 
      $(this).dialog("close"); 
 
     } 
 
     }, 
 
     { 
 
     text: "Cancel", 
 
     click: function() { 
 
      $(this).dialog("close"); 
 
     } 
 
     } 
 
    ] 
 
    }); 
 
    $("#dialog_help").click(function() { 
 
    $("#dialog_form_file").dialog('open'); 
 
    }); 
 
    $("#change_button").click(function() { 
 
    $("#dialog_form").dialog('open'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<div id="dialog_form_file" style="display: none"> 
 
    <p>Hello</p> 
 
</div> 
 
<div id="dialog_form" style="display: none"> 
 
    <p>Hello</p> 
 
</div>

來源

2017-08-10 punit saharawat

jquery ui的.dialog函數應該有一個html參數。閱讀文檔。 – user5014677

1.我將jQuery UI添加到您的代碼中 - 它不是[mcve] 2.您隱藏了所有內容。請更新代碼片段 - 添加鏈接和按鈕 – mplungjan

@ user5014677您的意思是[此文檔]（http://api.jqueryui.com/dialog/），其中指出'dialog（）'方法沒有'html '參數？在這裏OPs使用'dialog（）'是絕對沒問題的。 –

您可以通過執行降低代碼：

$("#dialog_form_file, #dialog_form").dialog({

您不需要爲2個差異選擇器再次編寫相同的代碼。

來源

2017-08-10 07:24:49

我試圖做到這一點，但兩個對話框都打開相同的地方 $（「＃dialog_help，#change_button」）。click（function（）{（「＃dialog_form_file #dialog_form」）。dialog（'open'）; \t}）; –

在這裏，你有一個解決方案https://jsfiddle.net/aspoptua/2/

$(document).ready(function() { 
 
    $("#dialog_form_file, #dialog_form").dialog({ 
 
    modal: true, 
 
    autoOpen: false, 
 
    title: "Help", 
 
    width: 450, 
 
    buttons: [{ 
 
     text: "OK", 
 
     click: function() { 
 
      $(this).dialog("close"); 
 
     } 
 
     }, 
 
     { 
 
     text: "Cancel", 
 
     click: function() { 
 
      $(this).dialog("close"); 
 
     } 
 
     } 
 
    ] 
 
    }); 
 
    
 
    $("#dialog_help, #change_button").click(function() { 
 
    $("#" + $(this).data('modal')).dialog('open'); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<div id="dialog_form_file" style="display: none"> 
 
    <p>Hello</p> 
 
</div> 
 
<div id="dialog_form" style="display: none"> 
 
    <p>Hello</p> 
 
</div> 
 
<button type="submit" id="dialog_help" data-modal="dialog_form_file"> 
 
Submit 1 
 
</button> 
 
<button type="submit" id="change_button" data-modal="dialog_form"> 
 
Submit 1 
 
</button>

附加代碼去HTML

<button type="submit" id="dialog_help" data-modal="dialog_form_file"> Submit 1</button> 
<button type="submit" id="change_button" data-modal="dialog_form"> Submit 1</button>

變化的代碼JavaScript

$("#dialog_help, #change_button").click(function() { 
    $("#" + $(this).data('modal')).dialog('open'); 
});

來源

2017-08-10 08:06:22 Shiladitya

如何減少jQuery代碼

回答

相關問題