Форум

All_ex74 · #1 (**permalink**) 20.01.2013, 19:19

Здравствуйте уважаемые специалисты. Помогите пожалуйста разобраться.
Имеется конструкция:

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

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

Заранее большое спасибо!..

Deff · #2 (**permalink**) 20.01.2013, 20:09

<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, 20:18

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>

Deff · #4 (**permalink**) 20.01.2013, 20:20

рони,
при клике по одной из ссылок текст A подменялся текстом В из своего скрытого тега span. К примеру - А1 на В1, А2 на В2 и т.д. При повторном клике - возвращался обратно.

рони · #5 (**permalink**) 20.01.2013, 20:24

Deff,
и что не так в моём коде? при

.tags span{
  display: none;
}

All_ex74 · #6 (**permalink**) 20.01.2013, 20:43

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

zoOmer · #7 (**permalink**) 27.08.2014, 08:56

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

Заранее огромное спасибо!

skrudjmakdak · #8 (**permalink**) 27.08.2014, 08:59

1. делаем клик;
2. выдергиваем из спана текст, сохраняем либо в переменную через замыкание, либо можно записать в какой-нибудь атрибут этого спана;
3. записать в спан новый текст, готово.

zoOmer · #9 (**permalink**) 27.08.2014, 13:25

skrudjmakdak, А, как в js это реализовать?

skrudjmakdak · #10 (**permalink**) 27.08.2014, 14:28

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

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

Форум

Справочник

Discord чат

Курсы javascript