Как получить индекс элемента по классу, который щелкнул

Question

У меня есть этот код:

<button class="remove" value="1" /> 
<button class="remove" value="2" /> 
<button class="remove" value="3" /> 

$(document).on('click', ".remove", function(e) { 
    alert($(this).index()); 
}); 

Он всегда предупреждая 0. Если пользователь нажал на button, который имеет значение 2, он должен предупредить 1, но в моем коде он предупреждает 0.

Answer 1

в зависимости от того, что вы хотите, чтобы, наконец, достичь и при условии, что:

<button class="remove" value="34" data-myval="a"/> 
<button class="remove" value="33" data-myval="b"/> 
<button class="remove" value="32" data-myval="c"/> 

если вы хотите получить значение «значение»:

$(document).on('click', ".remove", function(e) { 
    alert($(this).val()); 
}); 

, если вы хотите, чтобы получить индекс, что была нажата:

$(document).on('click', ".remove", function(e) { 
    alert($(this).index()); 
}); 

, если вы хотите, чтобы получить пользовательское значение:

$(document).on('click', ".remove", function(e) { 
    alert($(this).data('myval')); 
}); 

Answer 2

Как отметил @Rory McCrossan, вы должны улучшить html button:

$(document).on('click', ".remove", function(e) { 
 
    console.log($(this).index()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="remove" value="1">Button 1</button> 
 
<button class="remove" value="2">Button 2</button> 
 
<button class="remove" value="3">Button 3</button>