Jquery无法在网格中随机选择div

Question

我有一个9个div的网格，嵌套在三列中。单击网格（#left）时，中间行2个div，row="1"应该随机应用类.show，在没有应用类的列中在底行，row="2"应该应用“.show”类。附图显示了可能的随机结果。同样的结果不应该连续出现。

我附上了我的代码的代码片段，目前，我的索引选择没有按预期工作，我一直在努力找到原因。

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 ......你必须提供它。

修改
当你致电selector()时，你知道它是一个功能......每次你调用这个功能时都会产生一个新号码。

如果你想要相同的＆＃34;数字＆＃34;要在.eq()语句中使用，只运行一次函数并将数字保存在变量中。

查看代码中的更改。

＆＃13;

＆＃13;

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"));

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;