2017-12-26 18 views
-9

5回クリックした後table:eq(0) td最初の機能を無効にしたい場合は、2回クリックした後にtable.dvojka td 2番目の機能を無効にします。5クリック後にクリックを無効にする

$("table:eq(0) td").click(function() { 
$(this).addClass("tdbarva"); 
}); 

$("table.dvojka td").click(function() { 
$(this).addClass("barvica"); 

}); 
+4

ボタンを無効にする試みはどこですか? – jmargolisvt

+0

私はそれがあまりボタンを無効にしていないと推測しているので、クリック処理イベントリスナを削除します。しかし、あなたは正しいのですが、リスニング除去ビットが起こるのはどこですか? – Snowmonkey

答えて

2

まず、クリックを追跡する少なくとも2つのグローバルカウンタを作成する必要があります。次に、各クリックイベントハンドラで、クリックがしきい値と一致するかどうかを確認する必要があります。そこからoff()を使用して、各<td/>からイベントハンドラを削除します。

let clickCountOne = 0; 
 
let clickCountTwo = 0; 
 

 
$("table:eq(0) td").click(function() { 
 
    clickCountOne++; 
 

 
    if (clickCountOne === 5) { 
 
    console.log('Click handler has been disabled for first table td'); 
 

 
    $(this).off('click'); 
 
    } 
 

 
    $(this).addClass("tdbarva"); 
 
}); 
 

 
$("table.dvojka td").click(function() { 
 
    clickCountTwo++; 
 

 
    if (clickCountTwo === 2) { 
 
    console.log('Click handler has been disabled for second table td'); 
 
    
 
    $(this).off('click'); 
 
    } 
 

 
    $(this).addClass("barvica"); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <td>Click Me</td> 
 
</table> 
 

 
<table class="dvojka"> 
 
    <td>Click Me Too</td> 
 
</table>

1

私は、クリック数を維持するために、テーブル自体にデータ属性を使用することをお勧めかもしれません。いずれかのテーブルをクリックすると、そのカウント属性が更新されます。そのイベントリスナーが呼び出され、その動的カウントが静的リミッタ(手動でDOMノードに入力されたもの)と比較されます。カウントが制限を超えている場合は、jQueryのoff()関数を使用して、そのテーブルのイベントハンドラを削除します。

希望すると便利です。

// Set my click counter to zero for all tables... 
 
$("table").each(function() { 
 
    $(this).data("clickCount", 0); 
 
}); 
 

 
// Create the references to each table element. 
 
var firstTable = $("table:eq(0)"); 
 
var secondTable = $("table.dvojka"); 
 

 
// Attach my event listeners... 
 
firstTable.on("click", "td", firstFunc); 
 
secondTable.on("click", "td", secondFunc); 
 

 
/**** 
 
* Each table will maintain its own click count data attribute. 
 
* 
 
****/ 
 
$("table td").on("click", function() { 
 
    var clickedTable = $(this).parents("table"); 
 
    var clickCount = parseInt(clickedTable.data("clickCount")) + 1; 
 
    var clickLimit = clickedTable.attr("data-clickLimiter"); 
 

 
    clickedTable.data("clickCount", clickCount); 
 
}); 
 

 
/***** 
 
* The following functions are used in the event listeners for the 
 
* tables, and are tracking their own count to determine when to 
 
* disable themselves. 
 
*****/ 
 
function firstFunc(evt){ 
 
    // the clickCount is dynamic, created by the program itself. 
 
    // The clickLimiter is a static attribute, defined on the DOM node manually. 
 
    var clickCount = parseInt(firstTable.data("clickCount")); 
 
    var clickLimit = parseInt(firstTable.attr("data-clickLimiter")); 
 
    
 
    // Has the count exceeded our limit? 
 
    if(clickCount >= clickLimit){ 
 
    // If it has, remove the event listener. 
 
    firstTable.off("click", "td", firstFunc); 
 
    } 
 
    console.log("You've clicked the first table "+ 
 
       clickCount + 
 
       " times. It has a limit of " + 
 
       clickLimit + 
 
       " clicks, or " + 
 
       parseInt(clickLimit-clickCount) + 
 
       " remaining"); 
 
} 
 

 
function secondFunc(){ 
 
    var clickCount = parseInt(secondTable.data("clickCount")); 
 
    var clickLimit = parseInt(secondTable.attr("data-clickLimiter")); 
 
    
 
    if(clickCount >= clickLimit){ 
 
    secondTable.off("click", "td", secondFunc); 
 
    } 
 
    console.log("You've clicked the second table "+ 
 
       clickCount + 
 
       " times. It has a limit of " + 
 
       clickLimit + 
 
       " clicks, or " + 
 
       parseInt(clickLimit-clickCount) + 
 
       " remaining"); 
 
}
.dvojka { 
 
    background-color: #ccc; 
 
    border: 1px solid black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table data-clickLimiter=5> 
 
    <thead> 
 
    <tr> 
 
     <th>Foo</th> 
 
     <th>bar</th> 
 
     <th>baz</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>01-01</td> 
 
     <td>01-02</td> 
 
     <td>01-03</td> 
 
    </tr> 
 
    <tr> 
 
     <td>02-01</td> 
 
     <td>02-02</td> 
 
     <td>02-03</td> 
 
    </tr> 
 
    <tr> 
 
     <td>03-01</td> 
 
     <td>03-02</td> 
 
     <td>03-03</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table class="dvojka" data-clickLimiter=2> 
 
    <thead> 
 
    <tr> 
 
     <th>Foo</th> 
 
     <th>bar</th> 
 
     <th>baz</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>01-01</td> 
 
     <td>01-02</td> 
 
     <td>01-03</td> 
 
    </tr> 
 
    <tr> 
 
     <td>02-01</td> 
 
     <td>02-02</td> 
 
     <td>02-03</td> 
 
    </tr> 
 
    <tr> 
 
     <td>03-01</td> 
 
     <td>03-02</td> 
 
     <td>03-03</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

これは同じように簡単に両方のテーブルのための単一のクリックハンドラで行われている可能性があり、それが唯一の適切なテーブルに対して無効にすることに注意してください - しかし、私は唯一のことを想定することができます両方のテーブルの処理が何らかの形で異なることになります。両方のテーブルが同じクリック機能を持っている場合は、2番目のテーブルのクリックハンドラを削除し、すべてのテーブルに対して1つの機能を持たせるのは簡単なことです。

関連する問題