如何获取jquery中前一个元素输入的当前值？

Question

我有一个按钮。 当我点击它时，我想在控制台中看到我的按钮元素之前的当前输入数字（这不是最终目标，但如果我能做到，rest 不会有问题）。

我使用我的代码得到的只是undefined 。 有人可以向我解释什么是错的以及如何做吗？

 $(".ajoutPanier").click(function() { var nb = $(this).prev(".inputNbArt").val(); console.log(nb);  });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="nbArticles"> <input class="inputNbArt" type="number" max="10" min="1" value="1"> </form> <a href="#openModal"> <button class="ajoutPanier">Ajouter Au panier</button> </a>

Answer 1

这里有两个问题。 首先在 a 元素内有a button元素是无效的 HTML。 我建议移除button并将它的class放在a上。 然后，您可以根据需要使用 CSS 设置a元素的样式。

其次，您使用的 DOM 遍历方法不太正确。 .inputNbArt元素是form的子元素，而不是单击的.ajoutPanier的兄弟元素。 要更正此问题，请使用prev()获取同级form ，然后使用find() 。 尝试这个：

 $(".ajoutPanier").click(function() { var nb = $(this).prev('.nbArticles').find('.inputNbArt').val(); console.log(nb);  });

 /* example button styling */ a.ajoutPanier { background-color: #CCC; display: inline-block; padding: 5px 10px; margin: 5px 0; border-radius: 5px; box-sizing: border-box; text-decoration: none; color: #000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="nbArticles"> <input class="inputNbArt" type="number" max="10" min="1" value="1"> </form> <a href="#openModal" class="ajoutPanier">Ajouter Au panier</a>

Answer 2

因为您的 HTML 无效（请参阅评论，我们无法确定 DOM 在任何给定浏览器中的外观，因为他们可以做任何他们需要使结构有效的事情。

当您单击按钮时，处理程序中的this将是该button元素。 prev仅查找先前的兄弟姐妹，但您要查找的元素不是兄弟姐妹，它是按钮父级的先前兄弟姐妹的子级（如果浏览器不重新定位button ，它很可能）。

你可以使用：

$(this).parent().prev().find(".inputNbArt")

但它相当脆弱。 相反，考虑将整个结构放在父元素中，然后：

$(this).closest("selector-for-parent-element").find(".inputNbArt")