根據點擊的內容自定義消息

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的當前狀態。