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あなたは 'dialog（）'メソッドが 'htmlを持たないことを意味する[this doc]（http://api.jqueryui.com/dialog/） 'パラメータ？ 'dialog（）'のOPの使用法はここではまったく問題ありません。 –

このコードを減らしたい：

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

2つの差分セレクタに対して同じコードを再度記述する必要はありません。

出典

2017-08-10 07:24:49

私はこれをやろうとしますが、両方のダイアログは同じ場所を開きます。 $（ "＃dialog_help、#change_button"）（0123） \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>

JavaScript

のコードの 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>

変更で追加のコードと一緒に行きます

出典

2017-08-10 08:06:22 Shiladitya

jQueryコードを減らすには

答えて

関連する問題