Jquery wähle Klickelement innerhalb einer Gruppe von Elementen mit demselben Klassennamen

Question

Vielleicht könnt ihr mir dabei helfen, ich habe in den letzten 30 Minuten damit zu kämpfen gehabt.

Sagen wir, ich habe vier Elemente mit der gleichen Klasse.

<div class="test">hi</div> 
<div class="test">hey</div> 
<div class="test">yo</div> 
<div class="test">What's up</div> 

Wie kann ich das anklicken, auf das geklickt wurde?

konnte ich es so die Arbeit:

$('.test').click(function() { 
    $(this).toggleClass("btn-danger btn-success"); 
}); 

aber ich brauche es ohne Feuer auf Erfolg nach einem Ajax-Aufruf angeklickt werden, so dass ich muß in der Lage sein, so etwas zu tun (Fehlversuche):

$('.test', this).toggleClass("btn-danger btn-success"); // This did not work 

$(this).find('.test').toggleClass("btn-danger btn-success"); // Also did not work 

Irgendwelche Vorschläge? Vielen Dank!!

Answer 1

Es klingt wie die Ajax-Aufruf gemacht wird, wenn eines der Elemente geklickt wird, aber Sie müssen auf unterschiedliche Werte in den Pass Ajax-Aufruf abhängig davon, auf welches Element geklickt wurde. Anstatt eine "Onclick" -Attribut zu verwenden, können Sie wie folgt vorgehen:

HTML:

<div class="test" data-param1="value1a" data-param2="value2a">hi</div> 
<div class="test" data-param1="value1b" data-param2="value2b">hey</div> 
<div class="test" data-param1="value1c" data-param2="value2c">yo</div> 
<div class="test" data-param1="value1d" data-param2="value2d">What's up</div> 

JavaScript:

$('.test').click(function() { 
    var $div = $(this); 
    $.ajax(url, { 
     data: { 
      param1: $div.attr('data-param1'), 
      param2: $div.attr('data-param2') 
     }, 
     success: function() { 
      $div.toggleClass("btn-danger btn-success"); 
     } 
    }); 
}); 

Natürlich würden Sie die Werte der data- Attribute gesetzt mit PHP-Variablen.

Answer 2

die Trigger-Funktion verwenden ....

So die Click-Handler anhängen ...

$('.test').on('click', function() { 
    $(this).toggleClass("btn-danger btn-success"); 
}); 

Dann in Ihrer Ajax-Erfolg Funktion .... auslösen, dass klicken ...

$('.test').trigger('click'); 

Aber zu bestimmen, welche zu triggern ist der Trick.

Woher weißt du, welcher zu klicken, basierend auf dem Ajax ????

Wenn Sie nur einen Ajax-Aufruf zu tun, basierend auf dem Sie einen Link cick dann ist die Lösung viel einfacher ....... Cuz Sie bereits wissen, welche Link

geklickt wurde

$('.test').click(function() { 
var link = $(this); 
$.ajax(url, { 
    success: function() { 
     link.toggleClass("btn-danger btn-success"); 
    } 
    }); 
}); 

Answer 3

Ist es nicht möglich, jeder von ihnen eine ID zu geben, damit Sie direkt darauf zugreifen können?

Wenn Sie sie auf eine Callback-Funktion auslösen, können Sie einen Verweis auf das angeklickte div in einer Variablen erstellen?

dh

var clicked; 

$('.test').click(function(){ 
    clicked = $(this); 
}); 

dann in Ihrer Ajax-Antwort:

clicked.toggleClass("btn-danger btn-success");