0

HTMLをループし、ユーザーがボタンをクリックしたときに特定のフィールド値を取得したいと思います。私は正しい値を取得するためにheadahceを持っています私を助けてください。

<div id="tabs1">
<table>
{foreach from=$this->products item=p}               
<tr>
<td><div class="tabs-product">
<div>
<input type='hidden' id='item' name='item' value='{$p.name}'/>
<input type='hidden' id='price' name='price' value='{$p.price}'/>
<button class="shareButton" onclick='post(); return false;'>Share</button>
</div></td></tr>
{/foreach}
</table></div>

<script>
 function post() {
    var item =  $(this).parent("tabs-product").attr("input");//this cause undefined
    var price = $('#price').val(); //this method only get first value
    alert(item + price);
}
</script>
4

3 に答える 3

3 
var $product = $(this).closest('.tabs-product');
var item = $product.find('input[name="item"]').val();
var price = $product.find('input[name="price"]').val();
  • input属性ではなく要素です。
  • のように絶対 ID を使用することはできません。$('#price')同一の ID (ループによって出力される) を持つ複数の要素があるためです。これは、仕様上は違法であり (ただし、緩いブラウザーでは許可されています)、役に立ちません。
  • セレクターを使用すると、製品内で実際に必要な要素input[name="..."]を特定できます。input
  • この場合、parentとclosest同様にうまく機能closestしますが、構造について気が変わって、レイアウトやその他の理由で追加の要素を挿入することにした場合、この種のケースでは柔軟性が高くなります。編集：コメントでTJが指摘したように、私は<div>この点を家に追いやる を逃しました。
于 2012-12-27T09:11:28.757 に答える
1

コードにいくつかの基本的な修正が必要です。

  • clickでイベントをバインドしjQueryて、jQuery オブジェクトを取得します$(this)。

  • も使用する必要があります。クラスセレクター用。あなたのコードparent("tabs-product")にはparent(".tabs-product")

  • クラス tabs-product の div はボタンの親ではなく、親 td に移動してアイテムと価格を見つける必要があります。

  • id はページ内で一意である必要があり、アイテムと価格に同じ id が繰り返されます。

$('.shareButton').click(関数(){

    var item =  $(this).closest('td').find("#item").va();//undefined
    var price = $(this).closest('td').find("#price").va()
    alert(item + price);

});

問題のように使用するjavascript onclick bindingには、ソース オブジェクトを post に渡し、それを jQuery オブジェクトに変換する必要がありますpost。

<button class="shareButton" onclick='post(this); return false;'>Share</button>

function post(obj) {
     var item =  $(this).closest('td').find("#item").va();//undefined
    var price = $(this).closest('td').find("#price").va()
    alert(item + price);
}
于 2012-12-27T09:10:42.460 に答える
-1

あなたのコードを見るとわかりましたが、あなたは間違っています。繰り返し、同じ ID を持つ要素を作成しますが、これはまったく良い習慣ではありません。classしたがって、属性を使用して使用することをお勧めしますJquery.first()

<div id="tabs1">
<table>
{foreach from=$this->products item=p}               
<tr>
<td><div class="tabs-product">
<div>
<input type='hidden' class='item' name='item' value='{$p.name}'/>
<input type='hidden' class='price' name='price' value='{$p.price}'/>
<button class="shareButton" onclick='post(); return false;'>Share</button>
</div></td></tr>
{/foreach}
</table></div>

<script>
 function post() {
    var item =  $(this).parent("tabs-product").attr("input");//undefined
    var price = $('.price').first().val(); //get only first value
    alert(item + price);
}
</script>

他の人の答えは大丈夫ですが、特にJqueryを使用する場合、複数の同一のIDを持つことはまったく良くありません

JQuery.first()参照 http://api.jquery.com/first/

JQuery.first()ここの使用例http://jsfiddle.net/uAkE8/2/

于 2012-12-27T09:12:10.440 に答える