jquery - 如何按数据权重属性对数据进行排序和获取排序数据？查询

Question

1 [使用来自@Justinas 的代码后]

<div>
        <span class="r1 c1 d1" data-weight="3"></span>
        <span class="r1 c2" data-weight="2"></span>
        <span class="r1 c3 d2" data-weight="3"></span>
    </div>
    <div>
        <span class="r2 c1" data-weight="2"></span>
        <span class="r2 c2 d1 d2" data-weight="4"></span>
        <span class="r2 c3" data-weight="2"></span>
    </div>
    <div>
        <span class="r3 c1 d2" data-weight="3"></span>
        <span class="r3 c2" data-weight="2"></span>
        <span class="r3 c3 d1" data-weight="3"></span>
    </div>

所以，这些是我得到的 span 和 div，我正在制作井字游戏(计算机对玩家)，它应该像我无法打败计算机一样工作。我放置了数据权重属性来显示确切跨度的值(value)。我有攻击功能的问题-我需要让它像它首先在最有值(value)的范围内攻击玩家一样(中间的行和列，然后是对 Angular 线，然后是图片中添加的所有其他/更多细节2)我真的不知道如何制作一个函数来获取所有这些数据权重，并按降序对它们进行排序，以选择所有可用范围中最有值(value)的范围……谢谢!

我之前做了一个函数，它只是按照出现顺序而不是数据权重在每个跨度中进行攻击。

    function attack() {
            var span = ['.r1 c1 d1', '.r2 c1', '.r3 c1 d2', '.r1 c2', '.r2 c2 d1 d2', '.r3 c2', '.r1 c3 d2', '.r2 c3', '.r3 c3 d1'];
            var weight = $('[data-weight]');
            var tempLoop = true;
            $.each(weight, function (k, span){
                var weight= $(weight).data('weight');
                $(span).each(function () {
                    if (tempLoop) {
                        if (isNaN($(this).data("full"))) {
                            $(this).data("full", 1)
                                    .data("value", -1)
                                    .html("<i class=\"fa fa-times\"></i>");
                            console.log("attack");
                            tempLoop = false;
                        }
                    }
                });
            })
        }

Answer 1

使用 .sort() 函数并比较两个元素的 .data('weight') ，然后您将按重量对元素进行排序，循环它或选择首先是权重最高的。将相对权重应用到攻击第一个细胞

$(document).ready(function() {
  $('.table span')
    .sort(function(a, b) {
      return $(b).data('weight') - $(a).data('weight');
    })
    .each(function(k, i) {
      var $this = $(this);
      setTimeout(function () {
        $this.text(k + '/' + $this.data('weight'));
      }, k * 200);
    });
});

.table {
  width: 300px;
  height: 300px;
}
.table div {
  height: 100px;
}
.table span {
  box-sizing: border-box;
  border: 1px solid white;
  background: #555;
  width: 33.333%;
  height: 100%;
  float: left;
  display: inline-block;
  color: white;
  text-align: center;
  line-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
{attack-order / cell-weight}
<hr/>
<div class="table">
  <div>
    <span class="r1 c1 d1" data-weight="3"></span>
    <span class="r1 c2" data-weight="2"></span>
    <span class="r1 c3 d2" data-weight="3"></span>
  </div>
  <div>
    <span class="r2 c1" data-weight="2"></span>
    <span class="r2 c2 d1 d2" data-weight="4"></span>
    <span class="r2 c3" data-weight="2"></span>
  </div>
  <div>
    <span class="r3 c1 d2" data-weight="3"></span>
    <span class="r3 c2" data-weight="2"></span>
    <span class="r3 c3 d1" data-weight="3"></span>
  </div>
</div>

---

游戏示例

$(document).ready(function() {
  computerMove();

  $('.table span:not(.full)').click(function() {
    $(this).addClass('full player');
    computerMove();
    checkWinner();
  });
});

function computerMove() {
  $('.table span:not(.full)')
    .sort(function(a, b) {
      return $(b).data('weight') - $(a).data('weight');
    })
    .first()
    .addClass('full computer');
}

function checkWinner() {
  if ($('.table span:not(.full)').length == 0) {
    // Do your logic of winning here:
    var hasWon = Math.random() > 0.5;

    if (hasWon) {
      alert('You have won');
    } else {
      alert('You have lost');
    }
  } else {
    return undefined;
  }
}

function restartGame() {
  $('.table span').removeClass('full');
  computerMove();
}

.table {
  width: 300px;
  height: 300px;
}
.table div {
  height: 100px;
}
.table span {
  box-sizing: border-box;
  border: 1px solid white;
  background: #555;
  width: 33.333%;
  height: 100%;
  float: left;
  display: inline-block;
  color: white;
  text-align: center;
  line-height: 100px;
}
.table span.full {
  background: white;
  border-color: black;
}
.table span:not(.full):hover {
  background-color: #666;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
{attack-order / cell-weight}
<hr/>
<div class="table">
  <div>
    <span class="r1 c1 d1" data-weight="3"></span>
    <span class="r1 c2" data-weight="2"></span>
    <span class="r1 c3 d2" data-weight="3"></span>
  </div>
  <div>
    <span class="r2 c1" data-weight="2"></span>
    <span class="r2 c2 d1 d2" data-weight="4"></span>
    <span class="r2 c3" data-weight="2"></span>
  </div>
  <div>
    <span class="r3 c1 d2" data-weight="3"></span>
    <span class="r3 c2" data-weight="2"></span>
    <span class="r3 c3 d1" data-weight="3"></span>
  </div>
</div>