Смена содержимого DIV при клике по ссылкам

Тема в разделе "JavaScript", создана пользователем silmarion, 18 сен 2014.

Модераторы: ZiX
  1. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Добрый день,
    пытаюсь реализовать смену стоимости товара в другой валюте при клике по ссылке.
    Есть основная цена в USD - $cpr
    и цены, которые вычисляются с xml банка,
    переменные у них такие
    Евро - $eurC
    рубли - $rubC

    основной блок с ценой
    <div id="price">тут цена в USD</div>

    скрытые блоки
    <div id="usd" class="hidden">тут цена в USD</div>
    <div id="eur" class="hidden">тут цена в EUR</div>
    <div id="rub" class="hidden">тут цена в RUB</div>

    и ссылки
    <a href="#" id="usdlink" >USD</a>
    <a href="#" id="EURlink">EUR</a>
    <a href="#" id="RUBink">RUB</a>

    Как собственное все это дело заставить работать, чтобы при клике по ссылкам в блоке price менялась цена, без перезагрузки страницы естественно?
     
  2. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    380
    Симпатии:
    236
    В head подключите jQuery:
    Код:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    и потом:
    Код:
    <div id="price">8 рублей</div>
    <a onclick="$('#price').text('10 рублей');">Сменить цену</a>
     
  3. Nikita_Sp

    Nikita_Sp Создатель

    Регистр.:
    28 мар 2013
    Сообщения:
    15
    Симпатии:
    3
    Немного переписал верстку, сделав вариант кода для любого кол-ва валют.
    Добавил соответствующие классы для блоков, хранящих значение с валютой, чтобы можно было по ID ссілки сразу обратиться к блоку и в блок #price записать значение из нужного блока.

    Что делает скрипт:
    при клике на ссылку в блоке .currencyLinks он берет ID ссылки ( $(this).attr('id') ), чтобы подставить в запрос к какому блоку обратиться и берет его html ( $( "."+$(this).attr('id') ).html() ) и вставляет собственно в твой блок #price.

    <script>
    $(document).ready(fucntion(){
    $(".curencyLinks a").click(function(){
    $("#price").html( $( "."+$(this).attr('id') ).html() );
    });
    });
    </scirpt>

    <div id="price">тут цена в USD</div>

    <div id="usd" class="hidden usdlink">тут цена в USD</div>
    <div id="eur" class="hidden EURlink">тут цена в EUR</div>
    <div id="rub" class="hidden RUBlink">тут цена в RUB</div>

    <div class="currencyLinks">
    <a href="#" id="usdlink" >USD</a>
    <a href="#" id="EURlink">EUR</a>
    <a href="#" id="RUBink">RUB</a>
    </div>