いくつかの機能のために彼のクラスでボタンを選択する方法

この2つのボタンで、クラスを追加するための2つの機能を実行します。

button1は

Hello1

に 'yellow'クラスを追加します

そして

button2 add 'green' class to

hello2

I tried something in a function bellow but i want to select the id of

instead of p:first

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

jQuery(document).ready(function addClass() {
jQuery('button').click(
    function() {
        jQuery('p:first').addClass('intro');
    });
});
.yellow,
.intro {
  font-size: 150%;
  color: yellow;
}
.green {
  font-size: 150%;
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hello1

hello2

hello3

<button id="b1">Button1</button> <button id="b2">Button2</button>
</div> </div>

Last question: why the first function work そして the second doesn't!

最初:

jQuery(document).ready(function addClass() {
    jQuery('button').click(function() {
        jQuery('p:first').addClass('intro');
    });
});

第二:

jQuery(document).ready( //without function
    jQuery('button').click(function() {
            jQuery('p:first').addClass('intro');
        );
    });
1

6 答え

1) Use jQuery('#p1') instead of usingjQuery('p:first')

2)あなたはこのようなものを書くことはできません

  jQuery(document).ready( //without function
                        jQuery('button').click(

それは間違った構文です

完全に機能するコードは次のようになります。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

jQuery(document).ready(function addClass() {
  jQuery('#b1').click(function() {
    jQuery('#p1').addClass('yellow');
  });
  jQuery('#b2').click(function() {
    jQuery('#p2').addClass('green');
  });
});
.yellow {
  font-size: 150%;
  color: yellow;
}
.green {
  font-size: 150%;
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hello1

hello2

hello3

<button id="b1">Button1</button> <button id="b2">Button2</button>
</div> </div>

2
追加された

提供されているjqueryセレクタを使用してp1またはp2を選択できます。 $( '#p1 ")接頭辞は、 id p1を選択することを意味します。

jQuery(document).ready(function() {
   //Your code
});

Syntax :

2つの構文が使用できます。

$(document).ready(function)

ready()メソッドは現在のドキュメントでのみ使用できるため、セレクタは必要ありません。

$(function)

functionは必須です。ドキュメントがロードされた後に実行する関数を指定します。

jQueryの代わりに$を使うこともできます。それらは同じです。

It must have a function or you can pass a named function see the documentation for more https://learn.jquery.com/using-jquery-core/document-ready/

http://www.w3schools.com/jquery/default.asp

2
追加された
ありがとう。そして、もし私がclass = "p1"だとしたら?代わりにID
追加された 著者 Prince,
ありがとう、私はあなたの応答を検証します
追加された 著者 Prince,
プレフィックスとして「」を使用する代わりに簡単です。「」を使用します。例 $( '。p1');
追加された 著者 Selim Ajimi,
追加された 著者 Selim Ajimi,
function function_name(){
// code for function decleration
}

後で使用できるように、関数を宣言するだけです。例えば、あなたが何度も何かをしなければならないならば。関数を使うためには、あなたはそれを呼ばなければなりません

function_name();

あなたの最初の例では(あなたの最後の質問の)あなただけの関数を宣言します。よりよく理解するためにあなたは追加を試みることができます

<button id="test">call function</button>

あなたのHTMLに

$('#test').click(function(){
   addClass();
});

$(document).ready 内に移動して再生します。また、JSとjqueryについてもっと読むことを強くお勧めします。 W3学校はあなたが始めるためのグーグルの場所になるでしょう。

1
追加された

IDで選択するには jQuery( '#p1')を使用してください。

jquery readyメソッドの正しい構文は次のとおりです。

$( document ).ready(function() {
    console.log( "ready!" );
});

https://learn.jquery.com/using-jquery-core/document - すでに/

1
追加された

jQuery('button') will select all the buttons. What you want is to select a specific button. Since both buttons have IDs, select them by their IDs like this:

jQuery('#b1').click(function(){
   //logic for the the button that has the ID b1
});

jQuery('#b2').click(function(){
   //logic for the the button that has the ID b2
});
1
追加された

IDセレクタ jQuery( "#p1")を使用してください。また、意図した動作がわからないこともありますが、どのボタンをクリックしたかに関係なく、コーディング方法が適用されます。あなたもそこにIDセレクタを使用したいかもしれません!

1
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript