以 jQuery 中的最后一个子项为目标

target the last child in jquery

本文关键字：目标 最后一个 jQuery      更新时间：2023-09-26

我创建了一个jquery问卷，当用户单击单选按钮时，它会导航到下一个问题单击此处。在最后一个问题上，提交按钮是可见的，但是如果您单击最后一个单选按钮，所有内容都会消失。有没有办法在用户到达最后一个问题时停用next()功能。

            $('.responsible-gaming__body input').click(function () {
            selfAssessmentTotal += parseInt($(this).val());
            var parentContainer = $(this).parents('.responsible-gaming__parentContainer');
            parentContainer.hide();
            parentContainer.next('.responsible-gaming__parentContainer').show();
        });

使用next('.responsible-gaming__parentContainer').length来查看下一个元素的存在。如果是，则执行下一次点击代码，否则不执行任何操作：

if(parentContainer.next('.responsible-gaming__parentContainer').length){
   //next element exist....add code here
}

完整代码：

$('.responsible-gaming__body input').click(function () {
        selfAssessmentTotal += parseInt($(this).val());
        var parentContainer = $(this).parents('.responsible-gaming__parentContainer');
        if(parentContainer.next('.responsible-gaming__parentContainer').length){
           parentContainer.hide();
           parentContainer.next('.responsible-gaming__parentContainer').show();
        }
 });

if(!parentContainer.next('.responsible-gaming__parentContainer').length){
//do your stuff here
}

if(parentContainer.next('.responsible-gaming__parentContainer').length){
       parentContainer.hide();
       parentContainer.next('.responsible-gaming__parentContainer').show();
 }

演示

将点击功能选择器更改为

$('.responsible-gaming__parentContainer:not(:last-child) input')

而不是

$('.responsible-gaming__body input')

这使您的代码可以更轻松地：

$('.responsible-gaming__parentContainer:not(:last-child) input').click(function () {
  selfAssessmentTotal += parseInt($(this).val());
  $(this).parent().parent().hide();
  $(this).parent().parent().next('.responsible-gaming__parentContainer').show();
});

仅在显示下一个容器后隐藏 parentContainer（如果没有下一个容器，则不会发生这种情况）：

$('.responsible-gaming__body input').click(function () {
    selfAssessmentTotal += parseInt($(this).val());
    var parentContainer = $(this).parents('.responsible-gaming__parentContainer');
    parentContainer.next('.responsible-gaming__parentContainer').show(0, function() {
        parentContainer.hide();
});

JSFiddle

相关文章：