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

フォームフィールドを識別する従来の方法は、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')。

于 2012-11-16T11:09:30.000 に答える
2

1つのオプションは、特別なセレクターを使用すること: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");
于 2012-11-16T11:09:30.263 に答える
2

非表示の入力（価格、名前）にクラス名を追加します。このようにして、htmlソースコードがより読みやすくなり、jsコードもより読みやすくなります。

于 2012-11-16T11:12:26.547 に答える