12

jQuery で関数を作成し、呼び出し、変数を渡すにはどうすればよいですか? ここではJavascriptスタイルです：

<script type="text/javascript">
function popup(msg) {
  alert(msg);
}
</script>

次に、イベントを HTML に含めるだけです。 

<html>
<input type="submit" onclick="popup('My Message')" />
</html>

これを行うのと同等のjQueryは何ですか? すべての「初心者」チュートリアルから、それらはすべて変数を受け入れない静的関数です。例えば：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('button').click(function() {
    alert('hello, world');
   });
});
</script>

さまざまなメッセージを動的に含めることができるようにしたいと考えています。上記のコードはすべてのボタンに影響を与え、'hello, world' という同じメッセージを吐き出します。

4

9 に答える 9

16

メッセージを動的にしたい場合は、次を使用しますdata-attributes。

<input class='message-button-' type="submit" data-message="My Message" />

次に、別の JavaScript ファイルで:

// equivalent of $(document).ready(function(){...
$(function(){

  // Functionality starts here
  $('.message-button').on('click', function(e){
    alert($(this).data('message'));
  })


});

これで、クラスを持つボタンがクリックされるたびに関数が実行.message-buttonされ、カスタム属性 data-message を使用してメッセージが表示されます。

お役に立てれば！:)

アップデート：

目立たないように JavaScript を実行することがベスト プラクティスと見なされていることに注意してください。一部の人々はonclick、例で行ったように属性をまだ使用していると述べていますが、そうしないでください。jquery の.on('click', function(){})メソッドを使用して、ここで示したようにイベントをバインドします。

クリック アイテムがアンカー タグ<a>の場合、必要に応じて次のように使用して、href が追跡されないようにすることができますe.preventDefault。

$('a').on('click', function(e){
  e.preventDefault()
})

また、知っておく必要がある場合に備えて、$('.message-button')は css セレクターを使用して dom 要素を取得しています。有効な CSS セレクターは通常、そこで機能します。

ステップバイステップ

まず、すべてのコードを jQuery が提供する関数にラップする必要があります。この関数は、ドキュメントが JavaScript アクションと dom 操作を処理できるようになるまで待機します。長い形式のバージョンはあります$(document).ready(function(){ /* CODE GOES HERE */ })が、私が使用したバージョンはショートカット$(function({ /* CODE GOES HERE */ })です:

$(function(){
})

次に、イベントをボタンにバインドする必要があります。class を指定したので、.message-buttonjQuery を使用してその要素を取得し、「クリック」イベントをそれにバインドできます。

$(function(){
  // Functionality starts here
  $('.message-button').on('click', function(e){
    // Code here executes when the input button is clicked
  })


});

イベント ハンドラーの内部は、イベントthisをトリガーした HTML 要素を直接指すように再バインドされます。$() でラップすると、jquery メソッドにアクセスできます。したがって、 $(this) は非常に頻繁に使用されます。jQuery は、要素の.data()任意のメソッドにアクセスするメソッドを提供data-*し、値を提供します。これがalert()が行っていることです。

$(function(){
  // Functionality starts here
  $('.message-button').on('click', function(e){
    alert($(this).data('message'));
  })


});
于 2012-06-14T22:53:56.970 に答える
6

これは、JavaScriptのようにこれを行うための私の最良の方法です:

---- こんな感じで jQuery を使って関数を作る

<script>$(document).ready(function(){
    popup=function(msg){
      alert(msg);
    }});
</script>

また、本体のコードを変更する必要はありません

<html>
<input type="submit" onclick="popup('My Message')" />
</html>

これがサンプルですhttp://jsfiddle.net/PLnF3/

---- でも待ってください。アラート メッセージを表示する必要があるだけなら、このサンプルが最適かもしれません。

<html>
<input type="submit" onclick="alert('My Message')" />
</html>

これを行うために JavaScript や jQuery は必要ありません。ボタンで alert('My Message') を使用するだけです。サンプルhttp://jsfiddle.net/PLnF3/1/

---- jQuery を使用して見栄えを良くしたい場合は、jQuery Dialog() を使用できます。

ここに例http://howto.software-mirrors.com/2013/09/how-to-make-jquery-popup-window.html これはコードです:

<script>
    $(document).ready(function() {
        popup = function(msg) {
            $("<div>" + msg + "</div>").dialog();
        }
    });
</script>

また、本文の html コードを変更する必要はありません。

<html>
<input type="submit" onclick="popup('My Message')" />
</html>

ここに例http://jsfiddle.net/PLnF3/2/

jQuery ダイアログを使用できるようにするには、jquery.js、jquery-ui.js、および jquery.css テーマが必要です。詳細については、http://howto.software-mirrors.com/2013/09/how-to-make-jquery-popup-window.htmlをご覧ください。

于 2013-09-07T05:36:49.477 に答える
4

次のように、各ボタンに異なる ID を指定します。

<input type="submit" id="submit-something" onclick="popup('My Message')" />

それで：

$(document).ready(function() {
    $('#submit-something').click(function() {
        alert('My message');
    });
});

また、タスクの繰り返しが多い場合は、別の関数を使用して関数を作成できます。

function messageHandler(message) {
    return function() {
        alert(message);
    };
}

$(document).ready(function() {
    $('#submit-something').click(messageHandler('My message'));
});
于 2012-06-14T22:53:41.183 に答える
3

data-*メッセージを属性に保存する必要があります。

<button data-message="Hi there!">...</button>

$('button').click(function() {
    alert($(this).data('message'));
});
于 2012-06-14T22:51:48.320 に答える
2 
$(document).ready(function() {
    var message = "foo"; // You might need to move it to the global scope,
                         // denepends on what you want to do with it.
  $('button').click(function() {
    alert(message);
   });
   ...
   ...
   message = "hello world";
});

sboutと言う価値があります：

jQueryで関数をどのように作成しますか

そのようなことはありません。jQueryで関数を作成してください。

于 2012-06-14T22:49:29.077 に答える
1

データをHTMLコードに格納する必要がある場合は、データ属性を選択することをお勧めします。

<button class="alert" data-msg="My Message">Click me</button>

JavaScript：

$(document).ready(function() {
  $('button.alert').click(function() {
      var msg = $(this).data('msg');  // access HTML attribute data-msg
      alert(msg);
  });
});
于 2012-06-14T22:51:33.117 に答える
0

私はいくつかの提案を試しましたが、うまくいきます..

--html ボタン

<input type="submit" value="Submit 1" class="message" data-message="Sample Message 1"/>
<input type="submit" value="Submit 2" class="message" data-message="Sample Message 2"/>

--ボタンクリック時のjquery

$('.message').live('click', function(){
      alert($(this).data('message'));
});
于 2012-06-15T05:29:02.683 に答える
0

1 つの解決策: パラメータなどの属性を使用します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('button').click(function() {
    alert($(this).attr("message"));
   });
});
</script>
<button message="personal message 1">Botton 1</button>
<button message="personal message 1">Botton 2</button>
于 2012-06-14T22:51:47.313 に答える