根据点击的内容自定义消息

Question

我有一个 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 个硬币”的文本更改为“已添加到购物车 - 单击以删除”的建议，以便您再次单击该按钮并将其删除购物车中的商品。

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

谢谢

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

看看fiddle 试试看。查看控制台以查看输出和cart 的当前状态。