javascript - How to find elements with attr id after click? -
basically, i'm working 3 tabs called 'monday', 'tuesday' , 'favorites'. have toggle icon empty heart @ start => ('.favorite i') within each box. if i'm in monday , click on icon empty heart turns filled out , parent cloned , added '#fav' tab.
when clicking in heart within cloned div whole box gets removed '#fav' tab icon within original div doesn't empty , keeps filled out.
so thought way grab id original , cloned div same , change toggle class there.
any appreciated!
i've created fiddle give better overview of issue:
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 = $(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); }; }); });
what i've tried..
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'); }
Comments
Post a Comment