Question

我想得到“行尸走肉”，但它只会隐藏第一个。我可以上课吗？这个怎么办？

$(".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>

Answer 1

识别表单字段的传统方法是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将始终只生成第一个值匹配。

例如，你也可以迭代你的元素集合，或者通过索引siblings('input[type=hidden]:eq(1)')或siblings('input[type=hidden]').eq(1)访问它们，但是如果你添加另一个隐藏的代码，它会破坏你的代码其他的领域。您真的应该更喜欢为元素命名，以便您可以以有意义的方式访问它们并了解您的数据。这样你就可以根据新的要求随意移动并修改你的标记，而不会破坏你的脚本。

顺便说一下，我使用上面的.val()，这是.attr('value')的简写。

Answer 2

一种选择是使用特殊选择器，例如:first和: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");

Answer 3

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

如何使用具有相同输入类型的两个.sibling？

3 个答案: