Настройка сообщения на основе того, что было нажано

Question

У меня есть div, в котором есть несколько меньших div. Каждый маленький div имеет свой идентификатор и принадлежит классу.

Когда вы щелкаете по элементу 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 Background Color", а затем добавить это в базу данных 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;   
}

Посмотри на эту скрипку, чтобы попробовать. Взгляните на консоль, чтобы увидеть вывод и текущее состояние cart,