Question

我有多个选择div，比如牌。如果单击＆＃34;选择＆＃34;然后将该卡的标题附加到选择列表中。

我的问题是＆＃34;取消选择＆＃34;按钮，应该从列表中删除卡片标题。我已尝试toggle() append()和remove()但没有成功。卡片标题已附加但未删除。

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

.accessories是卡内按钮的类。所以我搜索标题.image-title并追加它。页面上有多张卡。我不知道我怎么能让unselect按钮工作。我怎样才能实现它？

Answer 1

请查看下面的代码段。在这里，我已经使用点击功能替换了您的切换功能，并使用.each循环在每次点击时找出所有选定的配件，因此只找到所选的配件。在这种情况下，无需移除未选择的配件。

＆＃13;

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

＆＃13;

<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>

＆＃13;

JQuery toggle（）追加html元素

1 个答案: