Question

Here is my code – fairly simple:

$(document).ready(function(){         
  $(".location").each(function(){             
    $(this).click(function(){                 
      $("map").hide();                 
      var class = $(this).attr("data");                       
      $(".location").removeClass("activeLocation");                 
      $(this).addClass("activeLocation");                 
      $("." + class).show();             
    })         
  })     
});

HTML

<div id="locations">     
  <div class="location activeLocation" data="brian">1205 S 75th St</div>     
  <div class="location one" data="mark">6603 A Royal Street</div>     
  <div class="location" data="dan">4725 Merle Hay Rd</div>     
  <div class="location" data="andy">62 Soccer Park Road</div>     
  <div id="mapviewer" class="brian map">Map to 1205 S 75th Street</div>     
  <div style="display: none;" id="mapviewer" class="mark map">Map to 6603 A Royal Street</div>     
  <div style="display: none;" id="mapviewer" class="dan map">Map to 4725 Merle Hay Rd</div>    
  <div style="display: none;" id="mapviewer" class="andy map">Map to  62 Soccer Park Road</div>
</div>

Everything works if I comment out two lines:

var class = $(this).attr("data");
$("." + class).show();

Without these two lines commented, no action at all. These two lines of code look OK to me.
What am I missing?

Answer 1

Right after the line

var class = $(this).attr("data");

do

console.log(class) 

to see what it contains. Additionally you do not have to wrap this all in an each() function, just change the first line to

$('.location').click(function() {...

all of the this’s within the function will be this .location object