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 数组？

此外，我正在寻找一些关于如何将 div 上的“购买 40 个硬币”的文本更改为“已添加到购物车 - 单击以删除”的建议，以便您再次单击该按钮并从中删除该项目购物车。

如果我的问题不好，请不要只评价它，写评论，我会解决！！！！

谢谢

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;   
}

Look at that fiddle to try it. Have a look at the console to see the output and the current state of cart.

于 2013-03-30T15:45:02.553 回答