cssボタンでjquery関数を呼び出す方法は？

Question

私は非表示と表示と呼ばれる2つのJavaScriptのボタンがあります。

<button id="hide">Hide</button> 
<button id="show">Show</button> 

彼らは動作しますが、私は私が設計しCSS buttonsでそれらを交換したいと思います：

<button class="button button1" onclick="hide">Hide</button> 
<button class="button button1" onclick="show">Show</button> 

私の問題は、彼らがいないです適切 jQueryの関数を呼び出す、私は次のようにそのIDでそれを呼び出すようにしようとしています：

<button class="button button1" onclick="hide">Hide</button> 
<button class="button button1" onclick="show">Show</button> 

しかし、私はそれらを使用しようとすると、彼らは動作しません、私はこの状況を解決するための提案を感謝し、このjsfiddleを参照してください状況を参照してください。

$('.myClass').click(function() { 
       doSomething(); 
      }); 

Answer 1

JS Fiddle

HTML - aplly ()それの関数呼び出し

<button class="button button1" onclick="hide()">Hide</button> 
<button class="button button1" onclick="show()">Show</button> 

JS作るために -

function hide() { 
    $("#texto").hide(); 
} 

function show() { 
    $("#texto").show(); 
} 

---

それとも単純に適用する関数を作成しますid sの現在のボタンにクラスとそのが既に働いているので毎日それを呼び出す：

JS Fiddle

<button id="hide" class="button button1">Hide</button> 
<button id="show" class="button button1">Show</button> 

Answer 2

は

$('#myButtonID').click(function() { 
       doSomething(); 
      }); 

やクラスでを使用し、その後、あなたのボタンに異なるIDを与えます。例：

<button class="button button1" id="hide">Hide</button> 
<button class="button button1" id="show">Show</button> 

Answer 3

代わりの

<button class="button button1" onclick="hide">Hide</button> 
<button class="button button1" onclick="show">Show</button> 

前とIDを使用：

Answer 4

要素は、複数のクラスと1つのIDを持つことができます。

<button class="button button1" id="hide">Hide</button> 
<button class="button button1" id="show">Show</button> 

スタイリングに使用できるクラスは、jQuery関数で使用されるクラスです。両方を組み合わせても問題ありません。

あなたは、IDのは、それらのクリックにイベントをバインドするために使用されている方法をお使いのjQueryのコードで参照：追加しようとしているonclickのキーワードは、しかし、JavaScriptのイベントキーワードで

$(document).ready(function(){ 
    $("#hide").click(function(){ 
     $("#texto").hide(); 
    }); 
    $("#show").click(function(){ 
     $("#texto").show(); 
    }); 
}); 

、それはではなく、jQuery関数を呼び出します。

あなたのフィドルでは、jQueryとプレーンなjavascriptが混在しています。特に、あなたが何をしているのかが完全にわからないときは、より一貫性を持たせることをお勧めします。

Answer 5

使用クラスセレクタのように：

  $('.button').click(function (evt) { 
       if ($(evt.currentTarget).html() == 'Hide') { 
        $("#texto").hide(); 
       } else if ($(evt.currentTarget).html() == 'Show') { 
        $("#texto").show(); 
       } 
      }); 

は、彼らがどのIDを持っていませんhttps://jsfiddle.net/d6q9qjko/68/