Question

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

当您单击div时，会弹出一条消息，显示“已添加到购物车”（猜猜这是什么），我想知道如何获取单击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>

我的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的输出和当前状态。

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

1 个答案: