"this"関数が正しく動作していません

-1

私は多くのテーブルがありますtd。私がボタンをクリックすると、のtdの中にいくつかのhtml要素があります。 "this"を使ってこの関数をどのように解決できますか？"this"関数が正しく動作していません

$(document).ready(function() { 
 
      $("button").click(function clickMe(e) { 
 
       $(this).html ("this is hai") 
 
      }); 
 
     });

table td { 
 
    border: 1px solid; 
 
    border-color: lightgray; 
 
    overflow:hidden; 
 
    height:17px; 
 
    /*max-height:10px;*/ 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <body> 
 
<table style="border-collapse:collapse;border:1px solid;width:10%;height:100px;margin-top:50px;"> 
 
     <tr> 
 
      <td id="container"onclick="clickMe(this)"></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
    </table> 
 
    <button id="container" > clickme</button> 
 
    </body> 
 
    </html>

出典

2016-06-24 manu padmanabhan

。** IDは一意である必要があります。 ** 2。** 'clickMe'は_local_から' ready（） 'です。 ** 3。** '.html（' – Tushar

）にスペースを入れてはいけません。idをクラスに変更した方がいいでしょう。そうすればjquery $（ '。container'）で使うことができます。（click、function clickMe（e）{...}）;そしてhtmlからonclickを削除する –

私にこのスクリプトを使って完璧なスクリプトを教えてください –

への変更：だからclickMe機能は再使用する

<html> 
 
<head></head> 
 
    <body> 
 
     <table id="table_id"> 
 
      <tr> 
 
       <td>Td</td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
     </table> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <script> 
 
      $(document).ready(function() { 
 
       $("#table_id td").on("click",function(){ 
 
        $(this).html("this is hai"); 
 
      }) 
 
     })   
 
     </script> 
 
    </body> 
 
</html>

出典

2016-06-24 10:04:50 Ehsan

をしたいですか？次に、それをグローバルに配置し、パラメータを削除する必要がありますが、これは不要です。

ところで：idの重複が悪い習慣ですが、それはまだ動作します：

編集：あなたはclickMe機能にthisに現在の要素をバインドするonclick="clickMe.call(this)"を使用する必要があります。

function clickMe() { 
 
    $(this).html ("this is hai") 
 
} 
 

 
$(document).ready(function() { 
 
    $("button").click(clickMe); 
 
});

table td { 
 
    border: 1px solid; 
 
    border-color: lightgray; 
 
    overflow:hidden; 
 
    height:17px; 
 
    /*max-height:10px;*/ 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <body> 
 
<table style="border-collapse:collapse;border:1px solid;width:10%;height:100px;margin-top:50px;"> 
 
     <tr> 
 
      <td id="container" onclick="clickMe.call(this)"></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
    </table> 
 
    <button id="container" > clickme</button> 
 
    </body> 
 
    </html>

出典

2016-06-24 10:06:29 MattDiMu

$(document).ready(function() { 
 
    $("#table_id td").on("click", function(){ 
 
    $(this).html("this is hai"); 
 
    }); 
 
});

#table_id td { 
 
    border: 1px solid; 
 
    border-color: lightgray; 
 
    overflow:hidden; 
 
    height:17px; 
 
} 
 

 
#table_id{ 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <body> 
 
    <table id="table_id"> 
 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
    </table> 
 
    </body> 
 
</html>

私は本当にあなたが欲しいかわからない、それはこのようなものですか？

出典

2016-06-24 10:06:40

あなただけのコンテンツがコンテナに配置するか、単にしようとする場合は、この：

//it is unclear to me _what you exactly want_ if _this_ is <b>not</b> what you want. Give me a comment on _what is not correct_ and i'll try to edit goodluck!

$('#my_button').on('click', function(){ 
 
$('#place_here').html ("this is hai") 
 

 
});

table td { 
 
    border: 1px solid; 
 
    border-color: lightgray; 
 
    overflow:hidden; 
 
    height:17px; 
 
    /*max-height:10px;*/ 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <body> 
 
<table style="border-collapse:collapse;border:1px solid;width:10%;height:100px;margin-top:50px;"> 
 
     <tr> 
 
      <td id="container"></td> 
 
      <td id="place_here"></td> 
 
      <td></td> 
 
     </tr> 
 
    </table> 
 
    <button id="my_button"> clickme</button> 
 
    </body>

出典

2016-06-24 10:08:54

あなたはどのように jQueryと javascript作品を理解する必要があり

、あなたのコードは全く意味がありません。 IDを一意にする必要があることを忘れないでください。ページに複数回実装する必要がある場合は、クラスを使用する方がよいでしょう。私はデモを作成したので、スクリプトの仕組みを理解できました。

あなたのボタンをクリックすると、3つのTDが読み込まれるようになりました.jQueryボタンのクリックイベントでTDのIDを参照しています。 TDを入力したら、各TDをクリックしてHTMLコンテンツを出力します。以下のスクリプトを参照してください。 ** 1

 $(document).ready(function() { 
 
       $("button").click(function(e) { 
 
        $("#td1").html ("this is hai displayed at td1"); 
 
        $("#td2").html ("this is hai displayed at td2"); 
 
        $("#td3").html ("this is hai displayed at td3"); 
 
       }); 
 
      
 
       window.clickMe = function (data){ 
 
       alert(jQuery(data).html()); 
 
       } 
 
      });

 table td { 
 
     border: 1px solid; 
 
     border-color: lightgray; 
 
     overflow:hidden; 
 
     height:17px; 
 
     /*max-height:10px;*/ 
 

 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <html> 
 
     <body> 
 
    <table style="border-collapse:collapse;border:1px solid;width:10%;height:100px;margin-top:50px;" > 
 
      <tr> 
 
       <td id="td1" onclick="clickMe(this)"></td> 
 
       <td id="td2" onclick="clickMe(this)"></td> 
 
       <td id="td3" onclick="clickMe(this)"></td> 
 
      </tr> 
 
     </table> 
 
     <button id="container" > clickme</button> 
 
     </body> 
 
     </html>

出典

2016-06-24 10:16:20

"this"関数が正しく動作していません

答えて

関連する問題