如何创建一个函数获取jquery中下一个元素的id并调用此函数？

Question

我创建了自定义函数goToNext()它只是提醒我点击下一个元素的ID。

我想在另一个点击函数中调用这个自定义函数。

现在，当我点击第一个元素它提醒​​（下一个从第一，所以它的确定），但如果您单击第二个元素，它不会返回id_3（像它应该是），但它返回​​相同如果您单击最后一个元素（应该提醒第一）

这是我jsfiddle example here

function goToNext() { 
 
    var get_next_id = $('.btn').next().attr("id"); 
 
    alert(get_next_id); 
 
} 
 

 
$('.btn').click(function() { 
 
    goToNext(); 
 
});

.btn { 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 10px auto; 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="btn" id="id-1"> 
 
    1 
 
</div> 
 
<div class="btn" id="id-2"> 
 
    2 
 
</div> 
 
<div class="btn" id="id-3"> 
 
    3 
 
</div>

Answer 1

你必须使用this

function goToNext(thisObj){ 
 
var get_next_id = $(thisObj).next().attr("id"); 
 
    if(get_next_id!=undefined) 
 
     alert(get_next_id); 
 
    else 
 
     alert($(thisObj).parents().find("div:first").attr("id")); 
 
} 
 

 
$('.btn').click(function(){ 
 
goToNext(this); 
 
});

.btn{ 
 
    width:50px; 
 
    height:50px; 
 
    margin:10px auto; 
 
    background-color:yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class ="btn" id="id-1"> 
 
1 
 
</div> 
 
<div class ="btn" id="id-2"> 
 
2 
 
</div> 
 
<div class ="btn" id="id-3"> 
 
3 
 
</div>

Answer 2

试试这个

function goToNext($btn){ 
var get_next_id = $btn.next().attr("id"); 
alert(get_next_id); 
} 

$('.btn').click(function(){ 
goToNext($(this)); 
}); 

Answer 3

您需要使用参考this

function goToNext(e){ 
    var get_next_id = $(e).next().attr("id"); 
    alert(get_next_id); 
} 

$('.btn').click(function(){ 
    goToNext(this); 
}); 

Updated Fiddle