How to identify equal classes in numerical order with jQuery?

Question

On my page I have dozens of buttons that, when clicked, change the link (href) of a single element a, with the method attr. To avoid putting a class on each button as there are many, I would like jQuery to identify the buttons with the class .mudar in numerical order.

How I tried:

$(document).ready(function(){
  $(".mudar")[0].click(function(){
    $("#download").attr("href", "https://file1.zip");
  });
  $(".mudar")[1].click(function(){
    $("#download").attr("href", "https://file2.zip");
  });
  $(".mudar")[2].click(function(){
    $("#download").attr("href", "https://file3.zip");
  });
});


<a href="" id="download">baixar</a>

<button class="mudar">zip 1</button>
<button class="mudar">zip 2</button>
<button class="mudar">zip 3</button>

It didn’t work because I don’t understand how it works. Can you help me with that?

Answer 1

You can pick up the content through the index():

$(document).ready(function(){
  $(".mudar").click(function(){
    var indice = $(this).index();
    $("#download").attr("href", "https://file"+indice+".zip");
  });
});

In your specific case, you could also take the number that it contains in the string and change the link through it:

var indice = $(this).html().replace( /^\D+/g, '');

Editing

After comments and chat conversations I created this solution:

First put the name of the files in the tag name of the buttons and a p with the custom file name that will be downloaded:

<button name="file1" class="mudar">zip 1 <p style="display: none">azul</p></button>
<button name="file2" class="mudar">zip 2 <p style="display: none">preto</p></button>
<button name="file3" class="mudar">zip 3 <p style="display: none">amarelo</p></button>

Then use this code:

$(document).ready(function(){
  $(".mudar").click(function(){
    var file = $(this).attr("name");
    var nameFile = $(this).find('p').html();
    var download = $("#download");
    download.attr("href", "https://"+file+".zip");
    download.attr("download", nameFile);
  });
});