Question

基本上，我正在使用三个标签，分别是“星期一”，“星期二”和“收藏夹”。我有一个切换图标，这是一个空心的开始=＆gt; （'.favorite i'）在每个方框内。如果我在星期一并点击图标，空心就会被填满，父母将被克隆并添加到'#fav'标签中。

当点击克隆div中的心脏时，整个框将从“#fav”标签中删除，但原始div中的图标不会变空并保持填充。

所以我认为唯一的方法就是从原始和克隆的div中获取id，这是相同的，并从那里更改切换类。

感谢任何帮助！

我创造了这个小提琴，以更好地概述这个问题：

https://fiddle.jshell.net/itsfranhere/nbLLc3L0/44/

HTML：

<div class="container">
   <div class="tabs_main">

      <div class="col-md-5"><a data-target="#mon" class="btn active" data-toggle="tab">Monday</a></div>
      <div class="col-md-5"><a data-target="#tue" class="btn active" data-toggle="tab">Tuesday</a></div>
      <div class="col-md-2"><a data-target="#fav" class="btn active" data-toggle="tab"><i class="fa fa-heart" aria-hidden="true"></i></a></div>

   </div>

   <div class="tab-content">

     <div class="tab-pane active" id="mon">
       <br>
       <div class="spaces">
         <div class="box-container">
           <div class="box not-selected" id="box1">
           <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
         </div>
         <div class="box-container">
           <div class="box not-selected" id="box1">
           <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
         </div>
       </div>
     </div>

     <div class="tab-pane" id="tue">
       <br>
       <div class="spaces">
       </div>
     </div>

     <div class="tab-pane" id="fav">
        <br>
     </div>

   </div>
</div>

JS：

// Clones
$('div.tab-pane').on('click', '.favorite', function(e) {
  e.preventDefault();

  var par = $(this).parents('.box');

  var id = $(this).parents('.parent');
  var idFind = id.attr("id");
  var idComplete = ('#' + idFind);
  console.log(idComplete);

  //TOGGLE FONT AWESOME ON CLICK
  if ($(par).hasClass('selected')) {
    par.find('.favorite i').toggleClass('fa-heart fa-heart-o');
  } else {
    par.find('.favorite i').toggleClass('fa-heart-o fa-heart');
  };

  if ($(par.hasClass('selected')) && ($('i').hasClass('fa-heart-o'))) {
    par.closest('.selected').remove();
    var getIcon = $(this).find('.favorite i').toggleClass('fa-heart-o fa-heart');
  }

  // Clone div
  var add = $(this).parent().parent().parent();
  add.each(function(){

    if ($(add.find('.not-selected .favorite i').hasClass('fa-heart'))) {

      var boxContent = $(add).clone(true, true);
      var showHide = $(boxContent).find(".session").addClass('selected').removeClass('not-selected');
      var get = $(boxContent).html();

      var temp = localStorage.getItem('sessions');

      var tempArray = [];

      tempArray.push(get);

      var myJSONString = JSON.stringify(tempArray);

      var parseString = $.parseJSON(myJSONString);

      var finalString = myJSONString.replace(/\r?\\n/g, '').replace(/\\/g, '').replace(/^\[(.+)\]$/,'$1').replace (/(^")|("$)/g, '');

      var myJSONString = localStorage.setItem('sessions', finalString);

      $("#fav").append(tempArray);

    };

  });

});

我尝试了什么..

  var id = $(this).parents('.parent');
  var idFind = id.attr("id");
  var idComplete = ('#' + idFind);

  if ($(par.hasClass('selected')) && ($('i').hasClass('fa-heart-o'))) {
    par.closest('.selected').remove();
    var getIcon = $(idComplete).find('.favorite i').toggleClass('fa-heart-o fa-heart');
  }

单击后如何查找带有attr id的元素？

0 个答案: