ユーザーがXボタンをクリックしてクラスを切り替えるときにどうすればいいですか？

-1

tgタグでクラスを削除してトグルするには、誰でもideeを使用するコードが必要ですか？コードは正常に動作しますが、私はそれを使用するためのいくつかのideeを持っていません。そして、非常に、それはユーザーがXボタンをクリックしてクラスを切り替えるときにどうすればいいですか？

リンクコードに私には良いことだIDEE： https://jsfiddle.net/iandslevi/oonmaLxy/#&togetherjs=3K3nFjRir5

<html> 
    <head> 
     <title>Page Title</title> 
     <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
     <style> 
     .with{ 
    background-color:red; 
} 
     </style> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <th class="ohne" >1</th> 
       <th class="ohne" >X</th> 
       <th class="ohne" >2</th> 
      </tr> 
      <tr> 
       <td class="ohne" numid="1" >team 1</td> 
       <td class="ohne" numid="2" >draw 1</td> 
       <td class="ohne" numid="3" >team 2</td    
      </tr> 


      <tr> 
       <td class="ohne" numid="4" >team 3</td> 
       <td class="ohne" numid="5" >draw 2</td> 
       <td class="ohne" numid="6" >team 4</td    
      </tr> 
     </table> 


    <ol id="list"> 


    </ol> 
<div id="result"> 
</div> 

<script> 
var sum = []; 

$("document").ready(function(){ 

$('td').click(function(){ 

var numid = $(this).attr("numid"); 
sum.push(numid); 
var addli = '<li numid="'+numid+'">'+numid +'<button class="remove"id="'+numid +'">X</button></li>'; 

$("#list").append(addli); 

console.log(sum) ; 

}) 

    $("td").click(function(){ 
     $(this).toggleClass("with"); 

    }); 


}) 

$(document).on('click', '.remove', function() { $(this).parent().remove(); 

}); 

</script> 
    </body> 
</html>

出典

2017-04-20 L.Shabtai

正確に達成したいことはありますか？あなたの質問は非常に不明です。 – ACOMIT001

Google翻訳がうまく行かなかったようです。このコードの仕組みを理解しようとしていますか？ –

私はコードの仕組みを理解しようとしていません。私はそれを書きました。確かに、私の英語は理解できません。申し訳ありません。しかし、私は本当にしたい。ボタンをクリックするとコードが機能します。しかし、tdタグをクリックしてボタンを生成し、最初に作成したのと同じtdタグでそのクラスを削除したいと思います。今回私はあなたが私を友人にしたことを大変願っています。そして再び彼は英語を後悔します。私は今自分自身を説明するために最善を尽くしました –

あなたのコードは、あなたがそれをクリックtd要素にwithクラスを追加します。また、それをクリックするとDOMから削除されるボタンも追加されます。

ボタンをクリックしたときの操作は、のボタンを追加した元のtd要素から 'with'クラスを削除することでした。

これは、あなたがそれを行う必要がありますどのように実施例である：https://jsfiddle.net/oonmaLxy/1/

そして、これはコードそのものです：

$("td").click(function(){ 
    $(this).toggleClass("with"); 
    var $button = $('<button>X</button>'); 
    $('<li></li>').append(
     $(this).data("numid"), 
     $button 
    ).appendTo("#list"); 
    $button.data('numid', $(this).attr("numid")).click(function() { 
     $('td[numid="' + $(this).data('numid') + '"]').removeClass('with'); 
     $(this).parent().remove(); 
    }); 
});

このコードは何、td要素にclickイベントをバインドすることです。私は、次の手順をやって、クリックイベント内

$("td").click(function(){ .... });

：

私がクリックされた要素にwithクラスを追加している：$(this).toggleClass("with");
次に、私は簡単なボタン要素を作成し、変数に保存しています：var $button = $('<button>X</button>');（私は後で必要になります）
私はが新たに作成されたli要素にボタンを追加し、その後、IDとulにそのliを追加=リスト

よ3210これは、リストにボタンを追加するコードです：

$('<li></li>').append(
    $(this).data("numid"), 
    $button 
).appendTo("#list");

次のことが最も重要な部分である - 私はあなたがボタンをクリックすると、それはwithを削除することを作っているところです元td要素からクラス：

私が最初の事はあなたがそれをクリックしたときに、それがどの知っているだろう、ボタンのデータで（$(this).attr("numid")を使用することにより）td要素の元numid属性を保存することですtdこれは、withクラスを削除するはずです。私は今まさにそれを行うためには、私はステップ＃2で作成し$button変数を使用していていること：

$button.data('numid', $(this).attr("numid"))

最後のものは、クラスを削除しますそのボタンにclickイベントをバインドすることです。

.click(function() { 
    // Select a 'td' element with "numid" attribute equal to the button's numid stored in its data, and remove the 'with' class from it 
    $('td[numid="' + $(this).data('numid') + '"]').removeClass('with'); 
    // Remove the button's parent 'li' from the DOM 
    $(this).parent().remove(); 
});

出典

2017-04-20 16:03:56

ユーザーがXボタンをクリックしてクラスを切り替えるときにどうすればいいですか？

答えて

関連する問題