JQuery 单击时淡出列表元素

Question

我正在尝试淡出有序列表中单击的元素。 on() 似乎 return 然后我可以操作的元素但是我如何生成选择器以实际淡出我在 HTML 中单击的可见 li？谢谢！

这是我的代码，有问题的行在底部：

$("#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

点击元素的选择器是$(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>

Answer 2

您可以使用 $(this) 来引用您单击的元素，并且 $(this).index() returns 它在其父元素中作为子元素的位置。

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();
})

JQuery 单击时淡出列表元素

JQuery fadeOut list element on click

html

javascript

jquery

parent-child

jquery-selectors