使用功能时选择最后一个可见字段

Question

这是我的问题：

我们有5个具有相同类名的输入字段，例如class="inputfield"。默认情况下，加载页面时，您只能看到第一个页面。在该字段旁边，您有一个显示第二个字段的按钮。单击它时，使用函数showNext()，您将看到第二个字段旁边再显示一个按钮以显示第3个字段等...

我想做什么？我必须使用class="inputfield"获取最后一个可见输入字段。

我已经找到函数last（）和:visible，但是当我点击按钮显示下一个输入字段时，第一个仍然是最后一个，因为我不知道如何刷新我的代码。

我想要做的是，每次调用函数showNext时，我都需要运行我的代码，所以我总是有最后一个可见的输入字段。我无法在showNext()中添加代码，因此我需要listener和我自己的代码来选择最后一个可见的输入字段。

使用我的代码，当用户点击我将显示的另一个按钮时，我想在输入字段中添加一个值。但我总是需要将它添加到最后一个可见输入字段，这就是为什么我需要知道最后一个可见字段是什么...

额外信息： 不可见字段已经在代码中显示：none。 我试过的是：

1. 当我只使用$(".inputfield").last()时，我得到了最后一个字段，但看不见的字段......
2. $(".inputfield:visible")它始终是第一个被“选中”的。即使第二个现在可见

这可能吗？

我问题的版画： 我用

选择它

$(".inputfield:visible").last().css("border", "2px solid #990000");



编辑： 我想我找到了解决问题的方法所以我总是有最后一个可见字段。 Tnx的帮助。

Answer 1

获取带有classname 'inputfield'的最后一个元素：

var inputs = document.getElementsByClassName('inputfield');
var lastInput = inputs[inputs.length - 1];

要使用类名'inputfield'获取最后一个可见元素，使用jQuery更容易：

var inputs = $('.inputfield:visible').last();

Answer 2

你的问题不是很清楚，但据我所知，你试图访问调用showNext后可见的最后一个元素。

知道最后一个可见输入是当前可见输入之前的输入，您可以使用该逻辑来知道调用showNext后最后一次可见输入是什么。

但是，您也可以在调用showNext之前简单地检索当前可见的元素。

var $lastVisible = $('.inputfield:visible').last();

showNext();

请注意，如果反转语句，也可以使用相同的逻辑来获取在调用showNext后显示的最后一个字段。