Question

我已经创建了一个自定义函数goToNext()，它只是警告我点击的下一个元素的id。

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

现在，当我点击第一个元素时，它会警告id_2（从第一个元素开始，所以没关系）但是如果你点击第二个元素它就不会返回id_3（就像它应该的那样）如果你点击最后一个元素（应该提醒第一个元素），它会返回id_2

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

试试这个

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

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

Answer 2

您需要使用参考this

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

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

Updated Fiddle

Answer 3

您必须使用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>

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

3 个答案: