JQuery toggle（）はHTML要素を追加します

Question

私はカードのような複数の選択divを持っています。 「選択」をクリックすると、そのカードのタイトルが選択リストに追加されます。

私の問題は「unselect」ボタンで、リストからカードのタイトルを削除することです。私はtoggle() とremove()を試してみました。カードタイトルは追加されますが削除されません。

function accessories(){ 
 
    var accessories; 
 
    $('.accessories').toggle(function() { 
 

 
    accessories = $(this).closest('.card').find('.image-title').text(); 
 
    acc_txt = '<p> - ' + accessories + '</p>'; //element to append and remove later. 
 
    $('#selection').append(acc_txt); 
 
    $(this).css({background: '#35a8a5', border: '1px solid #35a8a5'}); 
 
    $(this).val('Unselect'); 
 

 
    }, function() { 
 

 
    $('#selection').remove(acc_txt); 
 
    $(this).css({background: '', border: ''}); 
 
    $(this).val('Select'); 
 

 
    }); 
 
} 
 

 
jQuery(document).ready(function() { 
 
    accessories(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-sm-4 card"> 
 
    <div class="card-img"> 
 
    <img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/> 
 
    </div> 
 
    <h3 class="image-title text-center">Core Power Weighted Vest™</h3> 
 
    <div class="image-desc"> 
 
    <p><strong>Available for all models.</strong></p> 
 
    <p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p> 
 
    </div> 
 
    <input type="button" name="next" class="accessories" value="Select"/> 
 
</div> 
 

 
<div id="selection">here Should be appended the cards</div>

.accessoriesカード内のボタンのクラスです。だから私はタイトル.image-titleを検索し、それを追加します。このページには複数のカードがあります。 私はどのように私は非選択ボタンの作品を作ることができますか分からない。 どうすれば実現できますか？

Answer 1

以下のスニペットを確認してください。ここでは、あなたのトグル機能をクリック機能に置き換えて、.eachループを使用して、選択されたアクセサリすべてがクリックごとに見つかるようにしました。この場合、選択されていないアクセサリを取り外す必要はありません。

$(document).ready(function(){ 
 
    $('.accessories').click(function() {  
 
    var current_status = $(this).val(); 
 
    if(current_status=='Select'){ 
 
     $(this).css({background: '#35a8a5', border: '1px solid #35a8a5'}); 
 
     $(this).val('Unselect'); 
 
    }else{ 
 
     $(this).css({background: '', border: ''}); 
 
     $(this).val('Select'); 
 
    } 
 
    var accessories = ""; 
 
    $('.accessories[value="Unselect"]').each(function(){ 
 
     var selection = $(this).closest('.card').find('.image-title').html(); 
 
     accessories += '<p> - ' + selection + '</p>'; 
 
    }); 
 
    $('#selection').html(accessories); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="selection">here Should be appended the cards</div><br/><br/> 
 

 
<div class="col-sm-4 card"> 
 
    <div class="card-img"> 
 
    <img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/> 
 
    </div> 
 
    <h3 class="image-title text-center">Core Power Weighted Vest™</h3> 
 
    <div class="image-desc"> 
 
    <p><strong>Available for all models.</strong></p> 
 
    <p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p> 
 
    </div> 
 
    <input type="button" name="next" class="accessories" value="Select"/> 
 
</div> 
 

 
<div class="col-sm-4 card"> 
 
    <div class="card-img"> 
 
    <img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/> 
 
    </div> 
 
    <h3 class="image-title text-center">Core Power Weighted Vest™ - 1</h3> 
 
    <div class="image-desc"> 
 
    <p><strong>Available for all models.</strong></p> 
 
    <p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p> 
 
    </div> 
 
    <input type="button" name="next" class="accessories" value="Select"/> 
 
</div> 
 

 
<div class="col-sm-4 card"> 
 
    <div class="card-img"> 
 
    <img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/> 
 
    </div> 
 
    <h3 class="image-title text-center">Core Power Weighted Vest™ - 2</h3> 
 
    <div class="image-desc"> 
 
    <p><strong>Available for all models.</strong></p> 
 
    <p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p> 
 
    </div> 
 
    <input type="button" name="next" class="accessories" value="Select"/> 
 
</div> 
 

 

 
<div class="col-sm-4 card"> 
 
    <div class="card-img"> 
 
    <img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/> 
 
    </div> 
 
    <h3 class="image-title text-center">Core Power Weighted Vest™ - 3</h3> 
 
    <div class="image-desc"> 
 
    <p><strong>Available for all models.</strong></p> 
 
    <p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p> 
 
    </div> 
 
    <input type="button" name="next" class="accessories" value="Select"/> 
 
</div>