javascript - How to get class index from hovering Div -


i have been trying create system when hover on specific div, specific text relating div appears. each div in same class, info @ different div corresponding indexes. wondering if there way class index of each div hovering on them in order show hidden information them. (by showing hidden info divs).

<!doctype html>  <html>  <head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script>  var allpeople = [];    function win (name, info){  	this.name = name;  	this.info = info;  }    allpeople[0] = new win ("shelly", "is cool");  allpeople[1] = new win ("brandon", "likes golf");  allpeople[2] = new win ("steve", "plays football");  allpeople[3] = new win ("mia", "is cook");    var = 0;  $('document').ready(function(){  	for (i = 0; < allpeople.length; i++){  		$("body").append("<div class='people'> " + allpeople[i].name +" </div>");  		  	}  	for (i = 0; < allpeople.length; i++){  		$("body").append("<div class='info'> " + allpeople[i].info +" </div>");  	}  });    </script>  <style>  body {  	background-color: lightblue;  }  div {  	background-image: url("http://themes.wdfiles.com/local--files/semi-trans/semi-transbgtransparent.png");  	color: white;  	padding: 2%;  	margin: 2%;  	border: 3px white solid;  }  .info {  	display: none;  	border-color: red;  }  </style>  </head>  <body>          </body>  </html>

a simple solution can based on saving index of each div @ creation time data attribute like:

$("body").append("<div class='people' data-index='" + +"'> " + allpeople[i].name +" </div>"); 

var allpeople = [];    function win (name, info){      this.name = name;      this.info = info;  }    allpeople[0] = new win ("shelly", "is cool");  allpeople[1] = new win ("brandon", "likes golf");  allpeople[2] = new win ("steve", "plays football");  allpeople[3] = new win ("mia", "is cook");    var = 0;  $('document').ready(function(){      (i = 0; < allpeople.length; i++){          $("body").append("<div class='people' data-index='" + +"'> " + allpeople[i].name +" </div>");        }      (i = 0; < allpeople.length; i++){          $("body").append("<div class='info' data-index='" + +"'> " + allpeople[i].info +" </div>");      }      $('.people').hover(function(e) {          $('.info').eq($(this).data('index')).show();      }, function(e) {          $('.info:visible').hide();      });  });
body {      background-color: lightblue;  }  div {      background-image: url("http://themes.wdfiles.com/local--files/semi-trans/semi-transbgtransparent.png");      color: white;      padding: 2%;      margin: 2%;      border: 3px white solid;  }  .info {      display: none;      border-color: red;  }
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

you can use jquery.index():

var allpeople = [];    function win (name, info){      this.name = name;      this.info = info;  }    allpeople[0] = new win ("shelly", "is cool");  allpeople[1] = new win ("brandon", "likes golf");  allpeople[2] = new win ("steve", "plays football");  allpeople[3] = new win ("mia", "is cook");    var = 0;  $('document').ready(function(){      (i = 0; < allpeople.length; i++){          $("body").append("<div class='people'> " + allpeople[i].name +" </div>");        }      (i = 0; < allpeople.length; i++){          $("body").append("<div class='info'> " + allpeople[i].info +" </div>");      }      $('.people').hover(function(e) {          $('.info').eq($(this).index() % 4).show();      }, function(e) {          $('.info').eq($(this).index() % 4).hide();      });  });
body {      background-color: lightblue;  }  div {      background-image: url("http://themes.wdfiles.com/local--files/semi-trans/semi-transbgtransparent.png");      color: white;      padding: 2%;      margin: 2%;      border: 3px white solid;  }  .info {      display: none;      border-color: red;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

a different approach can based on filtering array elements (array.prototype.filter()) in order index of corresponding div. 

var allpeople = [];    function win (name, info){      this.name = name;      this.info = info;  }    allpeople[0] = new win ("shelly", "is cool");  allpeople[1] = new win ("brandon", "likes golf");  allpeople[2] = new win ("steve", "plays football");  allpeople[3] = new win ("mia", "is cook");    var = 0;  $('document').ready(function(){      (i = 0; < allpeople.length; i++){          $("body").append("<div class='people'> " + allpeople[i].name +" </div>");        }      (i = 0; < allpeople.length; i++){          $("body").append("<div class='info'> " + allpeople[i].info +" </div>");      }      $('.people').hover(function(e) {          var txt = this.textcontent.trim();          var peopleinfoidx = 0;          allpeople.foreach(function(ele, idx) {              if (ele.name == txt)                  peopleinfoidx = idx;          });          $('.info').eq(peopleinfoidx).show();      }, function(e) {          $('.info:visible').hide();      });  });
body {      background-color: lightblue;  }  div {      background-image: url("http://themes.wdfiles.com/local--files/semi-trans/semi-transbgtransparent.png");      color: white;      padding: 2%;      margin: 2%;      border: 3px white solid;  }  .info {      display: none;      border-color: red;  }
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more