要素がクリックされてdivに追加された場合、再度クリックしてdivから削除し、正確な位置に戻します。

Question

要素がクリックされると、指定したdiv要素に追加要素が追加されます。それが来た正確な位置。私の現在のコードはそれを持っていないので、私が持っているjQueryはa）回避策ですが、もっと重要なのはb）うまくいきません。私は間違って何をしていますか？ガイダンスを気に入ってください。

$('.choices').on('click', function() { 
 
    var $this = $(this); 
 
    if (($this.attr('id') == '#translateBoxCover')) { 
 
    $this.remove().appendTo('#choicesWrapper'); 
 
    } else { 
 
    $this.appendTo("#translateBoxCover"); 
 
    } 
 
});

#translateBoxWrapper { 
 
    position: relative; 
 
    float: left; 
 
    width: 100%; 
 
    margin: 50px auto 0 auto; 
 
    text-align: center; 
 
} 
 

 
#translateBox { 
 
    width: 70%; 
 
    height: 175px; 
 
    border: 5px dashed white; 
 
    text-align: center; 
 
    margin: auto; 
 
    vertical-align: middle; 
 
    z-index: 0; 
 
    overflow: hidden; 
 
} 
 

 
.translateBoxCover { 
 
    position: relative; 
 
    width: 99%; 
 
    height: 99%; 
 
    margin: 1% auto; 
 
} 
 

 
#choices { 
 
    position: relative; 
 
    float: left; 
 
    width: 100%; 
 
    margin: 50px auto 0 auto; 
 
} 
 

 
#choicesWrapper { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
.choices { 
 
    position: relative; 
 
    float: left; 
 
    background: #FFFFFF; 
 
    width: 100px; 
 
    height: 50px; 
 
    margin-left: 7px; 
 
    margin-top: 5px; 
 
    text-align: center; 
 
    padding-top: 25px; 
 
    box-shadow: 0 4px 8px 0 rgba(88, 88, 88, 0.50); 
 
    border-radius: 2%; 
 
    font-size: 22px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='translateBoxWrapper'> 
 
    <div id='translateBox'> 
 
    <div id='translateBoxCover'> </div> 
 
    </div> 
 
</div> 
 

 
<div id='choices'> 
 
    <div id='choicesWrapper'> 
 
    <div class='choices'>很</div> 
 
    <div class='choices'>中国</div> 
 
    <div class='choices'>美国</div> 
 
    <div class='choices'>爱</div> 
 
    <div class='choices'>喜欢</div> 
 
    <div class='choices'>我</div> 
 
    <div class='choices'>很</div> 
 
    <div class='choices'>很</div> 
 
    <div class='choices'>他</div> 
 
    <div class='choices'>川普</div> 
 
    <div class='choices'>厕所</div> 
 
    <div class='choices'>想</div> 
 
    <div class='choices'>你</div> 
 
    </div> 
 
</div>

Answer 1

あなたは要素を移動する前に、インデックスを保存する必要があります。 .data()を使用すると、要素の情報を保存できます。

また、IDには#文字が含まれていません。これはそのセレクタの構文です。

要素を移動するときに.remove()を使用する必要はありません。要素はDOM内の1か所にしか置かれないため、新しい場所に追加すると自動的に元の場所から削除されます。

$('.choices').on('click', function() { 
 
    var $this = $(this); 
 
    if ($this.parent().attr('id') == 'translateBoxCover') { 
 
    var index = $this.data('index'); 
 
    if (index == 0) { 
 
     $this.prependTo($("#choicesWrapper")); 
 
    } else { 
 
     $this.insertAfter($("#choicesWrapper .choices").eq(index-1)); 
 
    } 
 
    } else { 
 
    $this.data('index', $this.index()); 
 
    $this.appendTo("#translateBoxCover"); 
 
    } 
 
});

#translateBoxWrapper { 
 
    position: relative; 
 
    float: left; 
 
    width: 100%; 
 
    margin: 50px auto 0 auto; 
 
    text-align: center; 
 
} 
 

 
#translateBox { 
 
    width: 70%; 
 
    height: 175px; 
 
    border: 5px dashed white; 
 
    text-align: center; 
 
    margin: auto; 
 
    vertical-align: middle; 
 
    z-index: 0; 
 
    overflow: hidden; 
 
} 
 

 
.translateBoxCover { 
 
    position: relative; 
 
    width: 99%; 
 
    height: 99%; 
 
    margin: 1% auto; 
 
} 
 

 
#choices { 
 
    position: relative; 
 
    float: left; 
 
    width: 100%; 
 
    margin: 50px auto 0 auto; 
 
} 
 

 
#choicesWrapper { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
.choices { 
 
    position: relative; 
 
    float: left; 
 
    background: #FFFFFF; 
 
    width: 100px; 
 
    height: 50px; 
 
    margin-left: 7px; 
 
    margin-top: 5px; 
 
    text-align: center; 
 
    padding-top: 25px; 
 
    box-shadow: 0 4px 8px 0 rgba(88, 88, 88, 0.50); 
 
    border-radius: 2%; 
 
    font-size: 22px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='translateBoxWrapper'> 
 
    <div id='translateBox'> 
 
    <div id='translateBoxCover'> </div> 
 
    </div> 
 
</div> 
 

 
<div id='choices'> 
 
    <div id='choicesWrapper'> 
 
    <div class='choices'>很</div> 
 
    <div class='choices'>中国</div> 
 
    <div class='choices'>美国</div> 
 
    <div class='choices'>爱</div> 
 
    <div class='choices'>喜欢</div> 
 
    <div class='choices'>我</div> 
 
    <div class='choices'>很</div> 
 
    <div class='choices'>很</div> 
 
    <div class='choices'>他</div> 
 
    <div class='choices'>川普</div> 
 
    <div class='choices'>厕所</div> 
 
    <div class='choices'>想</div> 
 
    <div class='choices'>你</div> 
 
    </div> 
 
</div>