javascript - Jquery 麻烦在网格中随机选择 div

Question

我有一个由 9 个 div 组成的网格，它们嵌套在三列中。单击网格 (#left) 时，中间行的 2 个 div，row="1" 应该有类 .show 随机应用于它，在未应用类的列中，底行的 div，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() 时，您知道它是一个函数...并且每次调用该函数时都会生成一个新数字。

如果您希望在两个 .eq() 语句中使用相同的“数字”，只需运行该函数一次并将数字保存在变量中。

查看代码中的更改。

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>