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>

Answer 2

正如一位评论者建议的那样，我个人无法让你的代码运行，但无论如何你都非常接近。这是我改编自你的，略微调整。希望它有所帮助。

$(".display-player-box").each(function() {
  var selected = false;
  var selfId = $(this).attr('id');
  $('.removefromsquad').each(function() {
    if ($(this).hasClass(selfId)) {
      selected = true;
    }
  });

  if (selected) {
    $(this).addClass('selected');
  } else {
    $(this).removeClass('selected');
  }
});

使用类X循环遍历div以查找与div Y的相关性

2 个答案: