javascript - 循环遍历 X 类的 div 来查找与 Y 类的 div 的相关性

Question

我正在尝试编写一个脚本，让我能够:

• 循环.display-player-box元素设置每个 id作为变量，
• 循环.removefromsquad用于查找类属性的哪一部分与之前找到的对应的元素 .display-player-box id ,
• 如果找到对应的元素我想添加一个类 .selected对于这个特殊的.display-player-box匹配。

到目前为止我编写的代码:

$(".display-player-box").each(function() {                     // start looping
    $selected = 0;                                             // set a variable to default
    $boxid = $(this).attr("id");                               // set id of element being looped as variable
    $(".removefromsquad").each(function() {                    // loop through another row of elements
        if ($(this).attr("class").slice(16, 17) == $boxid) {   // looking for part of it's class matching previously saved variable
            $selected = 1;                                     // if yes, update variable 
        };
    });
    if ($selected == 1) {                                      // if variable was updated...
        $(this).addClass("selected");                          // add class to .display-player-box
    } else {                                                   // if not...
        $(this).removeClass("selected");                       // make sure it's removed
    }
});

问题是 - 它根本不起作用，当元素匹配时它不会添加类。控制台中没有错误。我做错了什么？

$(".display-player-box").each(function() {
                    $selected = 0;
                    $boxid = $(this).attr("id");
                    $(".removefromsquad").each(function() { 
                        if ($(this).attr("class").slice(16, 17) == $boxid) {
                            $selected = 1;   
                        };
                    });
                    if ($selected == 1) {
                        $(this).addClass("selected");
                    } else {
                        $(this).removeClass("selected");
                    }
                });

.selected {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Team slots:</p>
<div class="removefromsquad">EMPTY SLOT</div>
<div class="removefromsquad">EMPTY SLOT</div>
<div class="removefromsquad 3">PLAYER #3</div>
<div class="removefromsquad 4">PLAYER #4</div>

<p>Players to fill slots:</p>
<div class="display-player-box" id="1">PICK PLAYER #1</div>
<div class="display-player-box" id="2">PICK PLAYER #2</div>
<div class="display-player-box" id="3">PICK PLAYER #3</div>
<div class="display-player-box" id="4">PICK PLAYER #4</div>

Answer 1

您的帖子有效，但可以大大缩短。

$(document).ready(function() {
  $(".removefromsquad").removeClass("selected");
  $(".display-player-box").each(function() {
    var id = $(this).prop("id");
    $(".removefromsquad." + id).addClass("selected");
  });
});

.selected {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Team slots:</p>
<div class="removefromsquad">EMPTY SLOT</div>
<div class="removefromsquad">EMPTY SLOT</div>
<div class="removefromsquad 3">PLAYER #3</div>
<div class="removefromsquad 4">PLAYER #4</div>

<p>Players to fill slots:</p>
<div class="display-player-box" id="1">PICK PLAYER #1</div>
<div class="display-player-box" id="2">PICK PLAYER #2</div>
<div class="display-player-box" id="3">PICK PLAYER #3</div>
<div class="display-player-box" id="4">PICK PLAYER #4</div>

如果我将其设计为可重用组件，我会将其更改为如下所示。我希望以下内容能够真正帮助您掌握如何创建一些非常好的组件。

Highly Recommended Reading - Decoupling Your HTML, CSS, and JavaScript

$(document).ready(function() {
  $(".js-auto-selector").each(function() {
    var $container = $(this);
    var unselectSelector = $container.data("unselect");
    $container.find(unselectSelector).removeClass("selected");
    $container.find("[data-selector-target]").each(function() {
      var targetSelector = $(this).data("selector-target");
      $container.find(targetSelector).addClass("selected");
    });
  });
});

.selected {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-auto-selector" data-unselect="removefromsquad">
  <p>Team slots:</p>
  <div class="removefromsquad">EMPTY SLOT</div>
  <div class="removefromsquad">EMPTY SLOT</div>
  <div class="removefromsquad select-3">PLAYER #3</div>
  <div class="removefromsquad select-4">PLAYER #4</div>

  <p>Players to fill slots:</p>
  <div class="display-player-box" data-selector-target=".select-1">PICK PLAYER #1</div>
  <div class="display-player-box" data-selector-target=".select-2">PICK PLAYER #2</div>
  <div class="display-player-box" data-selector-target=".select-3">PICK PLAYER #3</div>
  <div class="display-player-box" data-selector-target=".select-4">PICK PLAYER #4</div>
</div>