使用jquery同时更改情侣网站上的文本字符串

Question

22I am preparing a website which will contain prices of products on couple pages. Sometimes the same products are on couple of pages (eg on the main page and the specific product page). What I'm trying to achieve is to have ability of using any sort of spreadsheet or any other type of document (another perhaps) to control prices of all items across the whole website. I believe every price must be indexed somehow so we know that in with id="product1" will be the correct price and different than in id="product2". Currently I have the example code here:

<h3>Product 1</h3>
<div class="price">
    <span id="product1">£55 per day</span>
</div>

<h3>Product 2</h3>
<div class="price">
    <span id="product2">£20 per day</span>
</div>

etc...

Sorry for rather a 'question type' topic than the 'case type', but I was trying to find the solution already. I know it can be done in php, but I have no idea about php unfortunately. So anything in html / javascript will be handy. Thnx a lot for any help/advice.

Answer 1

I would recommend storing the data in either a database or an xml file to be read by the website. That way it's a "change once" situation. However, the scope of what needs to be done is beyond what you'd find in a simple answer here.

Edit: Jquery is a client side language, which means that it will only change what's currently exposed to the client at that time. It does have the ability to read from an xml file, and use that data to populate the display. But that data does need to be stored externally for it to affect more than one page at the same time.

Answer 2

use JSON, not XML It's not 2003. Your jquery would be:

var prices = $.get("prices.json")
var product;
$("h3").each.( function()
{
    product = $(this).html();
    $(this).next().children("span").html(prices[product]);
});

Assuming you have no other H3 's on your pages, otherwise give each product ID 'h3' a class a la:

<h3 class="products">Product 1</h3>

and use $(".products") instead of $("h3") .

You could also use a selector to pull the <div> 's by class, and fetch the child <span> 's id .