Jqueryでグリッド内のdivをランダムに選択するときに問題が発生する

Question

私は3つの列に9つのdivを入れ子にしました。グリッド（#left）がクリックされたとき、真ん中の行から2つのdiv、row="1"はクラス.showを無作為に適用する必要があります。列がない場合、最下行のdivにはrow="2"にクラス 'があります。表示されます。添付された画像は、起こりうるランダムな結果を示しています。同じ結果が連続して現れるべきではありません。

私のコードのコードスニペットを添付しましたが、現在、私のインデックス選択は希望どおりに機能していないため、理由を探すのに苦労しています。

var obj = { 
 
    bindEvents: function() { 
 
    var _this = this; 
 
    $('#left').on("click", $.proxy(_this.interaction, _this)); 
 
    }, 
 
    interaction: function() { 
 
    var selector = this.randomGenerator(0, 3); 
 
    console.log('selector = ' + selector()); 
 
    var $midRow = $('#left').find('div[row=1]'); 
 
    var $bottomRow = $('#left').find('div[row=2]'); 
 
      
 
    $midRow.removeClass('show'); 
 
    $bottomRow.removeClass('show'); 
 
    $midRow.not(':eq(' + selector() + ')').addClass('show'); 
 
    $bottomRow.eq(selector()).addClass('show'); 
 
    }, 
 
    randomGenerator: function(min, max) { 
 
    var last; 
 
    console.log('last = ' + last); 
 

 
    return function() { 
 
     var random; 
 
     do { 
 
     random = Math.floor(Math.random() * (max - min)) + min; 
 
     } while (random === last); 
 
     last = random; 
 
     return random; 
 
     }; 
 
    }, 
 
} 
 
obj.bindEvents();

#left { 
 
    display: flex; 
 
} 
 
div[row] { 
 
    border: 1px solid black; 
 
    width: 20px; 
 
    background-color: yellow; 
 
} 
 
.show { 
 
    background-color: red !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="left"> 
 
    <div col="0"> 
 
     <div row="0">0</div> 
 
     <div row="1">1</div> 
 
     <div row="2">2</div> 
 
    </div> 
 
    <div col="1"> 
 
     <div row="0">0</div> 
 
     <div row="1">1</div> 
 
     <div row="2">2</div> 
 
    </div> 
 
    <div col="2"> 
 
     <div row="0">0</div> 
 
     <div row="1">1</div> 
 
     <div row="2">2</div> 
 
    </div> 
 
</div>

Answer 1

あなたは、関数への任意の要素を渡しません。
this ...あなたはそれを提供する必要があります。

EDIT
あなたがselector()を呼び出すと、あなたはそれが...関数であり、新しい番号は、関数を呼び出すたびに生成されることを認識しています。

.eq()ステートメントで同じ「数値」を使用する場合は、関数を1回だけ実行し、その数値を変数に保持します。

コードの変更を参照してください。

var obj = { 
 
    bindEvents: function(el) { // pass an element! 
 
    //var _this = this; 
 
    //$('#left').on("click", $.proxy(_this.interaction, _this)); 
 
    el.on("click", $.proxy(obj.interaction(el), el)); // Call the obj function. 
 
    }, 
 
    interaction: function(el) { // pass an element again! 
 
    var selector = obj.randomGenerator(0, 3); // Call the obj function. 
 
    
 

 
    // Get a number 
 
    var number = selector(); 
 
    console.log('selector = ' + number); 
 

 
    var $midRow = $('#left').find('div[row=1]'); 
 
    var $bottomRow = $('#left').find('div[row=2]'); 
 
      
 
    $midRow.removeClass('show'); 
 
    $bottomRow.removeClass('show'); 
 
    $midRow.not(':eq(' + number + ')').addClass('show'); 
 
    $bottomRow.eq(number).addClass('show'); 
 
    }, 
 
    randomGenerator: function(min, max) { 
 
    var last; 
 
    console.log('last = ' + last); 
 

 
    return function() { 
 
     var random; 
 
     do { 
 
     random = Math.floor(Math.random() * (max - min)) + min; 
 
     } while (random === last); 
 
     last = random; 
 
     return random; 
 
     }; 
 
    }, 
 
} 
 
obj.bindEvents($("#left"));

#left { 
 
    display: flex; 
 
} 
 
div[row] { 
 
    border: 1px solid black; 
 
    width: 20px; 
 
    background-color: yellow; 
 
} 
 
.show { 
 
    background-color: red !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="left"> 
 
    <div col="0"> 
 
     <div row="0">0</div> 
 
     <div row="1">1</div> 
 
     <div row="2">2</div> 
 
    </div> 
 
    <div col="1"> 
 
     <div row="0">0</div> 
 
     <div row="1">1</div> 
 
     <div row="2">2</div> 
 
    </div> 
 
    <div col="2"> 
 
     <div row="0">0</div> 
 
     <div row="1">1</div> 
 
     <div row="2">2</div> 
 
    </div> 
 
</div>