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

Question

我也想获得“行尸走肉”，但它只会隐藏第一个。我可以在 .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>

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') 的简写。