1

内部にいくつかの小さな div がある div があります。各小さな div には独自の ID があり、クラスに属しています。

divをクリックすると、「カートに追加されました」というメッセージがポップアップ表示されます(これが何であるかを推測してください)。クリックされたdiv内の段落内のテキストの値を取得する方法を知りたいです。これを PHP で行いたいので、実際にユーザーのカートでサーバーの変更を行うことができます。

ここに私のコードのサイトがあります（コードはできるだけ少なくするようにしていますが、不要なものもあるかもしれません）

http://jsfiddle.net/av3Da/2/

私のHTML：

<div id="shop">
    <input type="button" value="Go To Checkout" id="checkoutbutton" />
    <div class="shopitem" id="OrangeBG">
        <p class="shopitemname">Orange Background Color</p>
        <div class="buyinfo">
            <p class="buyinfoname">Buy - 40 Coins</p>
        </div>
    </div>
    <div class="shopitem" id="BlackBG">
        <p class="shopitemname">Black Background Color</p>
        <div class="buyinfo">
            <p class="buyinfoname">Buy - 40 Coins</p>
        </div>
    </div>
    <div class="shopitem" id="GreenBG">
        <p class="shopitemname">Green Background Color</p>
        <div class="buyinfo">
            <p class="buyinfoname">Buy - 40 Coins</p>
        </div>
    </div>
    <div class="shopitem" id="BlueBG">
        <p class="shopitemname">Blue Background Color</p>
        <div class="buyinfo">
            <p class="buyinfoname">Buy - 40 Coins</p>
        </div>
    </div>
    <div class="shopitem" id="YellowBG">
        <p class="shopitemname">Yellow Background Color</p>
        <div class="buyinfo">
            <p class="buyinfoname">Buy - 40 Coins</p>
        </div>
    </div>
    <div class="shopitem" id="PurpleBG">
        <p class="shopitemname">Purple Background Color</p>
        <div class="buyinfo">
            <p class="buyinfoname">Buy - 40 Coins</p>
        </div>
    </div>
</div>
<div id="confirmbox">
    <p>The item "<span id="box_item"></span>" was successfully added to your cart</p>
</div>

私のJavaScript：

$(document).ready(function(){  
    $(".buyinfo")
    .click(AddToCart)
    .mouseout(popUpVanish);
    $('#confirmbox').hide();

});

function AddToCart() {
    $('#confirmbox').show('normal');
}

function popUpVanish() {
    $('#confirmbox').delay(2000).fadeOut() ;
}

JSFIDDLE にコードを含める必要があるのはなぜですか?

すべてがごちゃごちゃしているように見えますが、それはフィドル サイトにあるためです。

それで、メッセージをカスタマイズして「X の背景色を購入しました」というメッセージを表示し、それを PHP データベースまたは JavaScript 配列に追加したい場合はどうすればよいでしょうか?

さらに、「40 コインで購入」という div のテキストを「カートに追加 - クリックして削除」に変更し、もう一度ボタンをクリックするとアイテムが削除されるようにする方法についてのアドバイスを探しています。カート。

私の質問が良くない場合は、評価を下げるだけでなく、コメントを書いてください。修正します!!!!

ありがとう

4

1 に答える 1

1

私はあなたが求めたほとんどの部分を達成しようとしました. しかし、私はあなたのためにすべてを行うことはできません。あなた自身で試してみてください。問題がある場合は、別の具体的な質問をする必要があります.

// Shop Stuff
var cart = [];

$(document).ready(function(){  
    var buttonTxt = '';

    $(".buyinfo").click(function() {
        //Store text and id of the selected element
        var txt = $(this).siblings('.shopitemname').text(); 
        var id = $(this).closest('.shopitem').attr('id');

        if(!$(this).hasClass('added')) {
           buttonTxt =  $('.buyinfoname', this).text();
           $('#box_item').text(txt);
           cart[id] = txt;            
           //Change text
           $('.buyinfoname', this).text('Added to cart - Click to remove');
           $(this).addClass('added');
           //Show and hide overlay
           $('#confirmbox').show('normal').delay(2000).fadeOut();
        } else {
           delete(cart[id]);
           $(this).removeClass('added');
           $('.buyinfoname', this).text(buttonTxt);
        }

        console.log(cart);
    });
});

デフォルトでオーバーレイを非表示にする Css。

#confirmbox {
 display: none;   
}

そのフィドルを見て試してみてください。コンソールを見て、出力と の現在の状態を確認しますcart。

于 2013-03-30T15:45:02.553 に答える