1

私は、Jquery を初めて使用する経験豊富な開発者です。コードがチェーンされている場合は機能するが、別の場合は機能しないという問題が発生しており、Jquery の動作を理解したいと考えています。

中には<div>ボタンが4つ付いています。4 つのボタンの 1 つが押されると、4 つのボタンすべてが消え、それを置き換える新しいボタンが必要になります (新しいボタンは、押されたボタンと同じ値を持つボタンですが、外観を変えるために CSS が異なります)。

ボタンが押されると、<div>このようにアウトをクリアします

$(this).parent().empty();

次に、挿入する新しいボタンを作成します

var splitstr = event.target.id.split('-');
var pick = splitstr[0];
var position_id = splitstr[1];
var singlebutton = '<button class="pick' + pick + ' pickbutton-box btn btn-primary btn-large madepick" name="pick" ' + 'id="made'+ position_id + '" ' + 'value="' + pick + '">' + pick + '</button>';

そして、それを親に挿入しようとしました:

$(this).parent().append(singlebutton);

これを行うと、の 4 つのボタンすべて<div>が削除されますが、新しいボタンは追加されません。ただし、空にして追加する前に文字列を作成すると

var singlebutton = " ---- HTML CODE for button ---- "
$(this).parent().empty().append(singlebutton);

すべてが期待どおりに機能します。これは私には意味がないようです。誰かが何が起こっているのか説明してください。

4

1 に答える 1

0

あなたはあなたがこのようなものを持っていると述べています：

<div>
    <button>click me</button>
    <button>click me</button>
    <button>click me</button>
    <button>click me</button>
</div>

そして、このようなイベントハンドラー：

$('div button').click(function() {
   $(this).parent().empty();
   // etc
});

ハンドラーコードが実行thisされると、クリックされたボタンを指します。このボタンは。によって削除され$(this).parent().empty();ます。後で参照できるように、親divへの参照を保存する必要があります。これthisは、空になるためです。このようなもの：

$('div button').click(function() {
   var div = $(this).parent().empty();
   // cannot use 'this' anymore below this point
   div.append('something');
});

親要素への参照は、から始まるもの.parentであり、の値はthis無関係になるため、連鎖バージョンは機能します。

于 2012-12-11T21:26:07.103 に答える