ループのdiv Y

Question

とcorelationを見つけるために、クラスXとのdivを通じて、私は私に聞かせスクリプト記述しようとしています：

• ループを通して各id
、変数としてループを設定 .display-player-box要素スルークラス属性のどの部分を見つけるため .removefromsquad要素がcoresponding要素が、私はマッチし、この特定の .display-player-boxにクラス .selectedを追加したい発見された場合、以前に .display-player-box id、
• を見つけてcoresponds。私がこれまで書いてきた

コード：

$(".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

1つのコメンターが示唆したように、私は個人的には、実行するためにあなたのコードを取得できませんでしたが、あなたは任意の割合で、非常に接近していました。ここで私があなたのものから順応した、少し調整。うまくいけば助けてくれます。

$(".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'); 
    } 
});