2

我也想得到“行尸走肉”，但它只会隐藏第一个。我可以在.this 上上课吗？或者我该怎么做？

$(".articel input[type='button']").click(function(){                    
        var price = $(this).siblings("input[type='hidden']").attr("value");
        var quantity =  $(this).siblings("input[type='number']").attr("value");
        var name = $(this).siblings("input[type='hidden']").attr("value");
        var ul = document.getElementById("buylist"); 
        var prod = name + " x " + quantity + " " + price + "$";

        var el = document.createElement("li"); 
        el.innerHTML = prod; 
        ul.appendChild(el);

<form class="articel">
        Quantity: <input type="number" style="width:25px;"><br>
        Add to cart: <input type="button" class="btn">
        <input type="hidden" value="30">
        <input type="hidden" value="The walking dead">
</form>
4

3 回答 3

2

我会在您的隐藏输入（价格、名称）中添加一个类名。这样html源代码更具可读性，js代码也将更具可读性。

于 2012-11-16T11:12:26.547 回答
2

识别表单字段的常规方法是通过name属性。

HTML：

<input type="hidden" name="title" value="The walking dead">

jQuery：

var name = $(this).siblings('input[name=title]').val();

您当前的选择器 ，siblings("input[type='hidden']")选择所有隐藏字段兄弟，但由于您无法辨别它们，attr将始终只产生第一个匹配项的值。

您也可以迭代您的元素集合，或者通过 index 或 访问它们siblings('input[type=hidden]:eq(1)')，siblings('input[type=hidden]').eq(1)但这是一个糟糕的设计，如果您为其他内容添加另一个隐藏字段，则会破坏您的代码。您确实应该更喜欢命名您的元素，以便您可以以有意义的方式访问它们并了解您的数据。这样您就可以根据新要求自由移动和修改您的标记，而不会破坏您的脚本。

顺便说一句，我在.val()上面使用，它是.attr('value').

于 2012-11-16T11:09:30.000 回答
2

一种选择是使用特殊的选择器，例如:firstand :last：

var price = $(this).siblings("input[type='hidden']:first").attr("value");
var name = $(this).siblings("input[type='hidden']:last").attr("value");

但是，您始终可以为元素设置类名：

<input type="hidden" class="price" value="30">
<input type="hidden" class="name" value="The walking dead">

var price = $(this).siblings(".price").attr("value");
var name = $(this).siblings(".name").attr("value");
于 2012-11-16T11:09:30.263 回答