Question

我正在尝试淡出有序列表中的单击元素。 on（）似乎返回了我可以操作的元素但是如何生成选择器以实际淡出我在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)来引用您点击的元素，$(this).index()会在其父级中返回其作为子级的位置。

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

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

单击JQuery fadeOut list元素

2 个答案: