Executing action on a non-clicked ID

Question

I have several links:

<a href="javascript:void(0);" id="ZoomPath" data-ref-id-map="Layer_1" data-ref-g-id="xxx">São Paulo - São Paulo</a>
<a href="javascript:void(0);" id="ZoomPath" data-ref-id-map="Layer_1" data-ref-g-id="yyy">São Paulo - Osasco</a>


<a href="javascript:void(0);" id="ZoomPath" data-ref-id-map="Layer_2" data-ref-g-id="xxx">São Paulo - São Paulo</a>
<a href="javascript:void(0);" id="ZoomPath" data-ref-id-map="Layer_2" data-ref-g-id="yyy">São Paulo - Osasco</a>

And I have the code:

$(document).on('click', 'a#ZoomPath', function(){

      var Mapa = $(this).attr('data-ref-id-map');
      var GID  = $(this).attr('data-ref-g-id');

      clicked(GID, Mapa);

      $("g#"+GID+' > path').each(function(){

        $(this).addClass('hover-map');

      });

      $("g#"+GID+' > path').each(function(){

      $(this).fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000, function(){
        $(this).removeClass('hover-map');
      });

      });

    });

function clicked(id_click, id_map) {

      var svgClicked = d3.select("svg#"+id_map);

      var bbox = d3.select("svg#"+id_map+" g#"+id_click).node().getBBox();

      var svgWidth = bbox.width;
      var svgHeight = bbox.height;

      var x = bbox.x-(280/2), //METADE DA LARGURA DO SVG /2
          y = bbox.y-(245/2); //METADE DA ALTURA DO SVG /2

      var scale = 2;

      svgClicked.transition().duration(2000)
          .call(zoom.translate([((x * -scale) + (svgWidth / 2)), ((y * -scale) + svgHeight / 2)])
          .scale(scale).event);
      }

The code above should work like this: When clicking on a link it takes the attributes data-ref-id-map and data-ref-g-id and zoom in on the SVG (data-ref-id-map) that has a path with the ID that is on data-ref-g-map. The problem is that it only zooms in ID SVG Layer_1. For more I click on the link that contains the Layer_2 he is giving in the other SVG (Layer_1).

I debugged to see which ID (layer) it is passing in the function clicked and it passes the right ID (layer) in case Layer_2

Answer 1

The error is in the repetition of ID, only one should be used ID for each element, although not giving an immediate error, the error occurs in the execution of the actions, in case the javascript ta reading the id of the first element, msm vc clicking on a later element.

I suggest you do the following:

or sets an id for each click, eg:

<a href="javascript:void(0);" id="ZoomPath1" data-ref-id-map="Layer_1" data-ref-g-id="xxx">São Paulo - São Paulo</a>
<a href="javascript:void(0);" id="ZoomPath2" data-ref-id-map="Layer_1" data-ref-g-id="yyy">São Paulo - Osasco</a>


<a href="javascript:void(0);" id="ZoomPath3" data-ref-id-map="Layer_2" data-ref-g-id="xxx">São Paulo - São Paulo</a>
<a href="javascript:void(0);" id="ZoomPath4" data-ref-id-map="Layer_2" data-ref-g-id="yyy">São Paulo - Osasco</a>

or if this is too complicated due to the amount of elements, instead of treating it as id, to treat it as class. Ex:

<a href="javascript:void(0);" class="ZoomPath" data-ref-id-map="Layer_1" data-ref-g-id="xxx">São Paulo - São Paulo</a>
<a href="javascript:void(0);" class="ZoomPath" data-ref-id-map="Layer_1" data-ref-g-id="yyy">São Paulo - Osasco</a>


<a href="javascript:void(0);" class="ZoomPath" data-ref-id-map="Layer_2" data-ref-g-id="xxx">São Paulo - São Paulo</a>
<a href="javascript:void(0);" class="ZoomPath" data-ref-id-map="Layer_2" data-ref-g-id="yyy">São Paulo - Osasco</a>

and here, you change the # for .

$(document).on('click', 'a.ZoomPath', function(){

Updating

I checked a few things, and I redid your code. Run a test and tell me please.

<a href="javascript:void(0);" class="ZoomPath" data-map="Layer_1" data-g="xxx">São Paulo - São Paulo</a>
    <a href="javascript:void(0);" class="ZoomPath" data-map="Layer_1" data-g="yyy">São Paulo - Osasco</a>


    <a href="javascript:void(0);" class="ZoomPath" data-map="Layer_2" data-g="xxx">São Paulo - São Paulo</a>
    <a href="javascript:void(0);" class="ZoomPath" data-map="Layer_2" data-g="yyy">São Paulo - Osasco</a>

$(document).on('click', 'a.ZoomPath', function(){

      var Mapa = $(this).data('map');
      var GID  = $(this).data('g');

      clicked(GID, Mapa);

      $("g#"+GID+' > path').each(function(){

        $(this).addClass('hover-map');

      });

      $("g#"+GID+' > path').each(function(){

      $(this).fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000, function(){
        $(this).removeClass('hover-map');
      });

      });

    });

function clicked(id_click, id_map) {

      var svgClicked = d3.select("svg#"+id_map);

      var bbox = d3.select("svg#"+id_map+" g#"+id_click).node().getBBox();

      var svgWidth = bbox.width;
      var svgHeight = bbox.height;

      var x = bbox.x-(280/2), //METADE DA LARGURA DO SVG /2
          y = bbox.y-(245/2); //METADE DA ALTURA DO SVG /2

      var scale = 2;

      svgClicked.transition().duration(2000)
          .call(zoom.translate([((x * -scale) + (svgWidth / 2)), ((y * -scale) + svgHeight / 2)])
          .scale(scale).event);
      }