JQuery FadeOut Listenelement beim Klick

Question

Ich versuche, ein angeklicktes Element in einer geordneten Liste auszublenden. on() scheint das Element zurückzugeben, das ich dann manipulieren kann, aber wie erzeuge ich den Selektor, um die sichtbare Li, die ich im HTML angeklickt habe, auszublenden? Danke!

Hier ist mein Code, Linie in Frage ist nach unten hin:

$("#steplist").on("click", ".step", function() { 
     var stepIndex = 0; 
     var li = this; // is the returned line 

     //gets index of clicked line in array by looping through elements 
     while (li.previousElementSibling) { 
      stepIndex++; //increments index counter 
      li = li.previousElementSibling; //sets li to be next li 
     } 

     //sets vars to values in temp, time fields 
     var temp = $("#temp").val(); 
     var time = $("#time").val(); 

     if (temp == 0 || time == 0) { 
      //alert("removing step" + stepIndex); 
      steps.splice(stepIndex, 1); 
     } else if (temp != 0 && time != 0) { 
      //needSelectorHere.fadeOut(3000, function(){ 
     }); steps.splice(stepIndex, 1, [temp, time]); 
} 
updateMash(); 
}); 

Answer 1

Sie $(this) verwenden können um auf das Element zu verweisen, auf das Sie geklickt haben, und $(this).index() gibt seine Position als Kind w zurück in seinem Elternteil.

jsFiddle

HTML:

<ol> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
</ol> 

JS:

$('li').on('click', function() { 
    alert($(this).index()); 
    $(this).fadeOut(); 
}) 

Answer 2

Der Wähler des auf das Element geklickt ist $(this)

$('div').click(function(){ 
 
    $(this).animate({ 
 
    'marginLeft' : '100px' 
 
    },800); 
 
});

div{position:relative;height:100px;width:100px;} 
 
    #red{background-color:red;} 
 
    #green{background-color:green;} 
 
    #blue{background-color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="red"></div> 
 
<div id="green"></div> 
 
<div id="blue"></div>