单击<a>时如何获取上一个文本框值？答案

【问题标题】：How to get Previous textbox value when click on <a>?单击<a>时如何获取上一个文本框值？
【发布时间】：2013-12-05 19:54:23
【问题描述】：

下面是我的代码，当单击位于同一 div 中的 <a> 时，我试图获取上述文本框的值。我的意思是说，如果我点击第二个“添加到购物车”链接，它会根据我的屏幕截图给我“test2”。

<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {

$(".ProductActionAdd a").click(function(){

    alert($('.ProductActionAdd a').prevAll(".ProductActionAdd a:first").attr('value'));
})
});

</script>
</head>
<body>
<div class="ProductActionAdd">
    <input type="text" value=""/>
    <a class="button" href="#">Add To Cart</a>
</div>
<div class="ProductActionAdd">
    <input type="text" value=""/>
    <a class="button" href="#">Add To Cart</a>
</div>
<div class="ProductActionAdd">
    <input type="text" value=""/>
    <a class="button" href="#">Add To Cart</a>
</div>
</body>
</html>

但没有成功。

请给我建议解决方案。

【问题讨论】：

标签： javascript jquery html dom

【解决方案1】：

您可以使用prev() 获取textbox

$( document ).ready(function() {
    $(".ProductActionAdd a").click(function(){ 
        alert($(this).prev().val());   
        alert($('.ProductActionAdd a').prevAll(".ProductActionAdd a:first").attr('id'));
    });
});

描述： 获取匹配元素集中每个元素的前一个兄弟元素，可选地由选择器过滤，reference。

给定一个代表一组 DOM 元素的 jQuery 对象， .prev() 方法搜索每个元素的前身在 DOM 树中并从匹配中构造一个新的 jQuery 对象元素。

该方法可选地接受相同类型的选择器表达式可以传递给 $() 函数。如果提供了选择器，前面的元素将通过测试它是否匹配来过滤选择器，reference。

【讨论】：

【解决方案2】：

输入是被点击的锚元素的前一个兄弟元素，所以使用.prev() ($(this).prev())

同样要获取元素的值使用.val()

$(document).ready(function () {
    $(".ProductActionAdd a").click(function () {
        alert($(this).prev().val());
    })
});

演示：Fiddle

【讨论】：

【解决方案3】：

$(".ProductActionAdd a").click(function(){    
    alert($(this).closest(':input').val());
});

【讨论】：

【解决方案4】：

试试这个

$(".ProductActionAdd a").click(function(){
    alert($(this).prev().val());
})

【讨论】：

【解决方案5】：

是的，您可以使用 jquery $(this) 完成此任务。完成这项任务的方法不止一种。

你可以试试jquery.prev()：

$(".ProductActionAdd a").click(function(){
    alert($(this).prev().val());        
});

或者您也可以尝试使用 jquery .parent() 查找父容器的输入

$(".ProductActionAdd a").click(function(){    
    alert($(this).parent().find('input[type="text"]').val());    
});

Try also in jsfiddle

【讨论】：

【解决方案6】：

试试这个

$(".ProductActionAdd a").click(function(){
alert($(this).closest('div').find('input').attr('id'));
});

http://jsfiddle.net/BmkL8/

【讨论】：

【解决方案7】：

检查一下：

$(".ProductActionAdd a").click(function(){

    $(this).prev("input[type=text]").val();
});

【讨论】：