Php 根据单击的内容自定义消息

我有一个div，里面有一些小div。每个小div都有自己的id，并且属于一个类

当您单击div时，会弹出一条消息，上面写着“Added to cart”（猜猜这是关于什么的），我想知道如何获取所单击div内段落中文本的值。我想用PHP实现这一点，这样我就可以用用户的购物车对服务器进行一些更改

这里有一个我的代码站点（我尽量少包含代码，但有些代码您可能觉得不必要）

我的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>

为什么我需要在JSFIDLE中包含代码

一切看起来都乱七八糟，但那是因为它在小提琴的网站上

那么，如果我想定制消息，说“您购买了X背景色”，然后将其添加到PHP数据库或javascript数组中

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

如果我的问题不好，请不要只是给它打分，写一条评论，我会修正的

---

谢谢

我刚刚试着实现你要求的大部分。但我不能为你做所有的事情，你必须自己尝试，如果有问题，你必须问另一个具体的问题

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

---

看看这个，试试看。查看控制台以查看

购物车的输出和当前状态

我刚刚尝试实现您要求的大部分功能。但我不能为你做所有的事情，你必须自己尝试，如果有问题，你必须问另一个具体的问题

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

---

看看这个，试试看。查看控制台以查看

购物车的输出和当前状态

有人请帮助此线程正在消失…有人请帮助此线程正在消失…您是如何想出此方法的？另外，你能帮我理解函数“this”吗？这很难理解，我已经写jquery很多年了，所以它对我来说不是什么大事<代码>这是指“当前上下文”，不知道书中会如何描述它。但是，如果您有一个单击事件，

这个

引用单击的元素。所以从

这个

你可以找到它的父母、兄弟姐妹等等……嗯，非常有趣，现在我知道我错过了什么！你是怎么想到这个的？另外，你能帮我理解函数“this”吗？这很难理解，我已经写jquery很多年了，所以它对我来说不是什么大事<代码>这是指“当前上下文”，不知道书中会如何描述它。但是，如果您有一个单击事件，

这个

引用单击的元素。所以从

这个

你可以找到它的父母、兄弟姐妹等等……嗯，非常有趣，现在我知道我错过了什么！