Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2013, 18:19
Интересующийся
Отправить личное сообщение для All_ex74 Посмотреть профиль Найти все сообщения от All_ex74
 
Регистрация: 20.01.2013
Сообщений: 16

Как заменить тексты ссылок текстами из тегов 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, в какой угодно последовательности. Как это можно реализовать?

Для наглядности - скриншот:



Заранее большое спасибо!..
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2013, 19:09
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2013, 19:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,559

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>

Последний раз редактировалось рони, 20.01.2013 в 19:38. Причина: сократил код, добавил css
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2013, 19:20
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

рони,
при клике по одной из ссылок текст A подменялся текстом В из своего скрытого тега span. К примеру - А1 на В1, А2 на В2 и т.д. При повторном клике - возвращался обратно.
Ответить с цитированием
  #5 (permalink)  
Старый 20.01.2013, 19:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,559

Deff,
и что не так в моём коде? при
.tags span{
  display: none;
}

Последний раз редактировалось рони, 20.01.2013 в 19:34.
Ответить с цитированием
  #6 (permalink)  
Старый 20.01.2013, 19:43
Интересующийся
Отправить личное сообщение для All_ex74 Посмотреть профиль Найти все сообщения от All_ex74
 
Регистрация: 20.01.2013
Сообщений: 16

Спасибо большое, очень помогли!!! Решение от рони идеально подошло!..

Последний раз редактировалось All_ex74, 20.01.2013 в 19:54.
Ответить с цитированием
  #7 (permalink)  
Старый 27.08.2014, 08:56
Кандидат Javascript-наук
Отправить личное сообщение для zoOmer Посмотреть профиль Найти все сообщения от zoOmer
 
Регистрация: 21.05.2013
Сообщений: 131

Аппну старую тему, Есть пара тегов <span> в одном из них нужно заменить текст при клике по нему и при повторном заменить обратно. Подскажите как сие реализовать?

Заранее огромное спасибо!
Ответить с цитированием
  #8 (permalink)  
Старый 27.08.2014, 08:59
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

1. делаем клик;
2. выдергиваем из спана текст, сохраняем либо в переменную через замыкание, либо можно записать в какой-нибудь атрибут этого спана;
3. записать в спан новый текст, готово.
Ответить с цитированием
  #9 (permalink)  
Старый 27.08.2014, 13:25
Кандидат Javascript-наук
Отправить личное сообщение для zoOmer Посмотреть профиль Найти все сообщения от zoOmer
 
Регистрация: 21.05.2013
Сообщений: 131

skrudjmakdak, А, как в js это реализовать?
Ответить с цитированием
  #10 (permalink)  
Старый 27.08.2014, 14:28
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

1. для начала надо найти спан, можно несколькими способами:
document.getElementById - по id
document.getElementsByClassName - по классу
document.querySelector - по селектору
и т.п.

2. присвоить событие - mySpan.onclick = function () { ...
3. выдернуть из спана текст внутри функции: this.innerHTML
4. записать новое значение, почти так же как и в 3м пункте..
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать так, чтобы JS при нажатии на кнопку не выполняла запрос со страницы. JSProgrammer Элементы интерфейса 3 18.05.2010 20:18
При нажатии на ссылку браузер запоминает как переход на др страничку mff AJAX и COMET 13 17.02.2010 21:46
Открытие сразу нескольких див-ов при нажатии на ссылку. Как? Jameson Элементы интерфейса 4 15.02.2010 22:03
Как очистить textarea при нажатии на него soniclord Общие вопросы Javascript 12 11.01.2010 08:12
Подскажите как убрать часть текста при нажатии на кномпу или гиперссылку. potkin Общие вопросы Javascript 6 10.10.2008 07:55