Как заменить тексты ссылок текстами из тегов span при нажатии
Здравствуйте уважаемые специалисты. Помогите пожалуйста разобраться.
Имеется конструкция: <div id="container" class="tags-container clearfix"> <div class="tags"><a href="#">A1 <span>B1 </span></a></div> <div class="tags"><a href="#">A2 <span>B2 </span></a></div> <div class="tags"><a href="#">A3 <span>B3 </span></a></div> <div class="tags"><a href="#">A4 <span>B4 </span></a></div> <div class="tags"><a href="#">A5 <span>B5 </span></a></div> <div class="tags"><a href="#">A6 <span>B6 </span></a></div> <div class="tags"><a href="#">A7 <span>B7 </span></a></div> <div class="tags"><a href="#">A8 <span>B8 </span></a></div> </div> Теги span скрыты силами css и отображается только текст А ссылки. Необходимо чтобы при клике по одной из ссылок текст A подменялся текстом В из своего скрытого тега span. К примеру - А1 на В1, А2 на В2 и т.д. При повторном клике - возвращался обратно. На самом деле ссылок около сотни. Поэтому применим только скрипт, который сможет обрабатывать любой блок div, в какой угодно последовательности. Как это можно реализовать? Для наглядности - скриншот: Заранее большое спасибо!.. |
<style> #container .Hide{display:none;} .tags span.B {color:red;} </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <div id="container" class="tags-container clearfix"> <div class="tags"><a href="#">A1 <span>B1 </span></a></div> <div class="tags"><a href="#">A2 <span>B2 </span></a></div> <div class="tags"><a href="#">A3 <span>B3 </span></a></div> <div class="tags"><a href="#">A4 <span>B4 </span></a></div> <div class="tags"><a href="#">A5 <span>B5 </span></a></div> <div class="tags"><a href="#">A6 <span>B6 </span></a></div> <div class="tags"><a href="#">A7 <span>B7 </span></a></div> <div class="tags"><a href="#">A8 <span>B8 </span></a></div> </div> <script type="text/javascript"> $(document).ready(function(){ $("#container > .tags a").each(function(){ $(this).html($(this).html().replace(/(.*)?<span>(.*)?<\/span>/ig,'<span class="А">$1</span><span class="B Hide">$2</span>')) }); $("#container > .tags a").click(function(){ $(this).find('span').toggleClass('Hide'); return false; }); }); </script> |
All_ex74,
<!DOCTYPE HTML> <html> <head> <title></title> <style type="text/css"> .tags span{ display: none; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(function(){ $(".tags a").bind("click",function(){ var a = $(this).text(); var s = $(this).find("span").text(); $(this).text(s).append($('<span/>', {text:a.replace(s,"")})); }) }); </script> </head> <body> <div id="container" class="tags-container clearfix" > <div class="tags"><a href="#">A1 <span>B1 </span></a></div> <div class="tags"><a href="#">A2 <span>B2 </span></a></div> <div class="tags"><a href="#">A3 <span>B3 </span></a></div> <div class="tags"><a href="#">A4 <span>B4 </span></a></div> <div class="tags"><a href="#">A5 <span>B5 </span></a></div> <div class="tags"><a href="#">A6 <span>B6 </span></a></div> <div class="tags"><a href="#">A7 <span>B7 </span></a></div> <div class="tags"><a href="#">A8 <span>B8 </span></a></div> </div> </body> </html> |
рони,
при клике по одной из ссылок текст A подменялся текстом В из своего скрытого тега span. К примеру - А1 на В1, А2 на В2 и т.д. При повторном клике - возвращался обратно. :yes: |
Deff,
и что не так в моём коде? при .tags span{ display: none; } |
Спасибо большое, очень помогли!!! Решение от рони идеально подошло!..
|
Аппну старую тему, Есть пара тегов <span> в одном из них нужно заменить текст при клике по нему и при повторном заменить обратно. Подскажите как сие реализовать?
Заранее огромное спасибо! |
1. делаем клик;
2. выдергиваем из спана текст, сохраняем либо в переменную через замыкание, либо можно записать в какой-нибудь атрибут этого спана; 3. записать в спан новый текст, готово. |
skrudjmakdak, А, как в js это реализовать?
|
1. для начала надо найти спан, можно несколькими способами:
document.getElementById - по id document.getElementsByClassName - по классу document.querySelector - по селектору и т.п. 2. присвоить событие - mySpan.onclick = function () { ... 3. выдернуть из спана текст внутри функции: this.innerHTML 4. записать новое значение, почти так же как и в 3м пункте.. |
Часовой пояс GMT +3, время: 14:14. |