Question

我创建了一个jquery问卷，当用户点击单选按钮时，它会导航到下一个问题click here。在最后一个问题上，可以看到提交按钮，但是如果您单击最后一个单选按钮，则所有内容都会消失。有没有办法在用户到达最后一个问题时停用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();
        });

Answer 1

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

Answer 2

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

Answer 3

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

DEMO

Answer 4

将点击功能的选择器更改为

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

Answer 5

只有在显示下一个容器时才隐藏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

定位jquery中的最后一个子节点

5 个答案: