-3

目標は、onClick で入力と表示された価格を変更することです。以下のコードは jquery 1.3.0 では機能しますが、1.10.1 では機能しません。私は何が欠けていますか？より良い方法があれば教えてください。

$(document).ready(function () {
    $("").click(update2);
});

function update2() {
    var Myprice = $("#price").val();
    $('#displayPrice').html('Price: ' + Myprice + '');
}

HTML マークアップ -

<input type="hidden" name="price" id="price" class="item_price" value="$15.00">
</label>
<div id="displayPrice" name="displayPrice" class="form_total">Price: $25.00</div>
<div class="xsshirt">
    <input id="size5" class="product-attr-size" name="size" type="radio" value="XSmall" onClick="document.getElementById('price').value='$25.00'" />
    <label for="XSmall"></label>
</div>
<div class="sshirt">
    <input id="size1" class="product-attr-size" name="size" type="radio" value="Small" onClick="document.getElementById('price').value='$25.00'" />
    <label for="Small"></label>
</div>
<div class="mshirt">
    <input id="size2" class="product-attr-size" name="size" type="radio" value="Medium" onClick="document.getElementById('price').value='$25.00'" />
    <label for="Medium"></label>
</div>
<div class="lshirt">
    <input id="size3" class="product-attr-size" name="size" type="radio" value="Large" checked="checked" onClick="document.getElementById('price').value='$25.00'" />
    <label for="Large"></label>
</div>
<div class="xlshirt">
    <input id="size4" class="product-attr-size" name="size" type="radio" value="XLarge" onClick="document.getElementById('price').value='$30.00'" />
    <label for="XLarge"></label>
</div>
</div>
4

4 に答える 4

4

$("") の代わりに $({some selector}) を使用する必要があります。$("") を使用して、クリック ハンドラーを何にもアタッチしていません。

他の人が言ったように、以前のバージョンの jQuery で $("") を使用すると、セレクターがデフォルトでドキュメントになるため、$(document) と同じでした。いずれにせよ、リスナをドキュメントまたはドキュメント本体に添付することはお勧めできません。クリックされている要素に近い要素にアタッチしてみてください (クリックされた要素自体ではありません。これは、1 つだけではなく、同じアクションを実行するハンドラーを複製していることを意味します)。

この特定のケースでは、次のように、シャツのアイテムにラッパーを追加し、委任されたイベント リスナーをアタッチします。

<div id="shirts">
    <div class="xsshirt">
        <input id="size5" class="product-attr-size" name="size" type="radio" value="XSmall" onClick="document.getElementById('price').value='$25.00'" />
        <label for="XSmall"></label>
    </div>
    <div class="sshirt">
        <input id="size1" class="product-attr-size" name="size" type="radio" value="Small" onClick="document.getElementById('price').value='$25.00'" />
        <label for="Small"></label>
    </div>
    <div class="mshirt">
        <input id="size2" class="product-attr-size" name="size" type="radio" value="Medium" onClick="document.getElementById('price').value='$25.00'" />
        <label for="Medium"></label>
    </div>
    <div class="lshirt">
        <input id="size3" class="product-attr-size" name="size" type="radio" value="Large" checked="checked" onClick="document.getElementById('price').value='$25.00'" />
        <label for="Large"></label>
    </div>
    <div class="xlshirt">
        <input id="size4" class="product-attr-size" name="size" type="radio" value="XLarge" onClick="document.getElementById('price').value='$30.00'" />
        <label for="XLarge"></label>
    </div>
</div>

JS

$("#shirts").on("click", ".product-attr-size", update2);
于 2013-09-03T16:14:30.053 に答える
2

古いバージョンの jQuery では$("")が$()返さdocumentれたため、現在のコードはクリック イベントをドキュメントにバインドしていました。

ドキュメントを対象とするようにセレクターを更新するだけです。

$(document).click(...

またはさらに良いことに、ターゲット要素に近い親要素をターゲットにします（ターゲット要素が何であれ、実際にはドキュメント上のすべてのクリックイベントをキャッチしたくないですか？）

于 2013-09-03T16:18:14.273 に答える
0

$("") の振る舞いが変わったと思います。クリック イベントを本文にバインドしてみてください。

$("body").click(update2);

このようにして、ページ上の任意の要素をクリックすると、DOM が本文にバブルアップします。

于 2013-09-03T16:19:52.437 に答える
0 
$(document).ready(function () {
    $("*").click(update2);
});

function update2() {
    var Myprice = $("#price").val();
    $('#displayPrice').html('Price: ' + Myprice + '');
}

$("*")クリックイベントをアタッチするときは、セレクターを見てください。$("input:radio[name=size]").click(update2);ラジオ ボタンをクリックしたときにのみ価格が変わるように、* をより関連性の高いものに置き換えてください。

デモフィドル

于 2013-09-03T16:18:24.550 に答える