Javascript.RU

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

Вывод функции Javascript в отдельном посте с помощью тега <div>
Здравствуйте уважаемые форумчане!
Нужна ваша помощь. В блоге на вордпресс хочу сделать спойлер с помощью:

<!-- код спойлера -->

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Показать решение";
}
else {
ele.style.display = "block";
text.innerHTML = "Закрыть";
}
}
</script>

В статье:

<a href="javascript:toggle();" id="displayText">Показать решение</a>
<div id="toggleText" style="display: none;">Сам текст в спойлере... </div>

Все работает при добавлении 1 спойлера в записи, мне нужно сделать 10.
Подскажите пожалуйста КАК?
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 21.12.2013, 15:30
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от sport-chess
<script language="javascript">
Атрибут language бесполезен на 100%. Его не нужно писать.

В теме скорей всего подключена либа jQuery, с ней код поудобней писать:

<a class="displayText">Показать решение</a>
<div class="toggleText" style="display:none">Сам текст в спойлере... </div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $('.displayText').click(function() { toggle(this) });
    function toggle(displayText) {
        displayText = $(displayText);
        var toggleText = displayText.next('.toggleText');
        if (toggleText.is(':visible')) {
            toggleText.hide();
            displayText.html('Показать решение');
        } else {
            toggleText.show();
            displayText.html('Закрыть');
        }
    }
</script>


jQuery конечно второй экземпляр подключать не нужно. Если эта либа не используется - можно без особых проблем переписать на чистом js.
__________________
В личку только с интересными предложениями

Последний раз редактировалось danik.js, 21.12.2013 в 15:33.
Ответить с цитированием
  #3 (permalink)  
Старый 21.12.2013, 15:53
Аватар для sport-chess
Интересующийся
Отправить личное сообщение для sport-chess Посмотреть профиль Найти все сообщения от sport-chess
 
Регистрация: 21.12.2013
Сообщений: 19

danik.js, спасибо за ответ, но может Вы знаете как расшифровать:
Цитата:
можно использовать несколько раз, меняя id в div'е
Как это реализовать?
Ответить с цитированием
  #4 (permalink)  
Старый 21.12.2013, 16:16
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от sport-chess
Как это реализовать?
Расставлять уникальные айдишники displayText-1, displayText-2 и тд. И передавать номер в toggle(1), toggle(2). Но это геморно все. Проще вобще обойтись без айдишников всяких (как в моем примере).
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 21.12.2013, 16:39
Аватар для sport-chess
Интересующийся
Отправить личное сообщение для sport-chess Посмотреть профиль Найти все сообщения от sport-chess
 
Регистрация: 21.12.2013
Сообщений: 19

+1 . Иду пробовать.
Ответить с цитированием
  #6 (permalink)  
Старый 21.12.2013, 16:45
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Демонстрация возможности
http://learn.javascript.ru/play/6uFHuc

Последний раз редактировалось Vlasenko Fedor, 21.12.2013 в 17:10.
Ответить с цитированием
  #7 (permalink)  
Старый 21.12.2013, 17:13
Аватар для sport-chess
Интересующийся
Отправить личное сообщение для sport-chess Посмотреть профиль Найти все сообщения от sport-chess
 
Регистрация: 21.12.2013
Сообщений: 19

Что не так?

<!-- код спойллера -->
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Показать решение";
}
else {
ele.style.display = "block";
text.innerHTML = "Закрыть";
}
}
</script>

1)
<a href="javascript:toggle(1);" id="displayText1">Показать решение</a>
<div id="toggleText" style="display: none;">Сам текст в спойлере... </div>

2)

<a href="javascript:toggle(2);" id="displayText2">Показать решение</a>
<div id="toggleText" style="display: none;">Сам текст в спойлере... </div>


Цитата:
<a class="displayText">Показать решение</a>
02 <div class="toggleText" style="display:none">Сам текст в спойлере... </div>
03 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
04 <script>
05 $('.displayText').click(function() { toggle(this) });
06 function toggle(displayText) {
07 displayText = $(displayText);
08 var toggleText = displayText.next('.toggleText');
09 if (toggleText.is(':visible')) {
10 toggleText.hide();
11 displayText.html('Показать решение');
12 } else {
13 toggleText.show();
14 displayText.html('Закрыть');
15 }
16 }
17 </script>
Тоже не фурычит...
Ответить с цитированием
  #8 (permalink)  
Старый 21.12.2013, 17:18
Аватар для sport-chess
Интересующийся
Отправить личное сообщение для sport-chess Посмотреть профиль Найти все сообщения от sport-chess
 
Регистрация: 21.12.2013
Сообщений: 19

Poznakomlus, спасибо за ответ.
А как сделать "Посмотреть ответ", чтоб отображалось ссылкой. И куда вставлять
<style>
.spoiler>input {
position: absolute;
top: -9999px;
left: -9999px;
}
.spoiler>label {
cursor: pointer;
}
.spoiler>label:before {
content:"Показать решение";
}
.spoiler>input:checked ~ label:before {
content:"Закрыть";
}
.spoiler>input:checked ~ .sp-content {
display: block;
}
.spoiler>.sp-content {
display: none;
border: 1px solid #d5d5d5;
background-color: #f5f5f5;
padding: 5px;
}
</style>

И этот код
<div class="spoiler">
<input type="checkbox" id="sp1" />
<label for="sp1"></label>
<div class="sp-content">Здесь будет наш текст...</div>
</div>
<div class="spoiler">
<input type="checkbox" id="sp2" />
<label for="sp2"></label>
<div class="sp-content">Здесь будет наш текст...</div>
</div>

Спасибо.
Ответить с цитированием
  #9 (permalink)  
Старый 21.12.2013, 18:39
Аватар для sport-chess
Интересующийся
Отправить личное сообщение для sport-chess Посмотреть профиль Найти все сообщения от sport-chess
 
Регистрация: 21.12.2013
Сообщений: 19

Цитата:
Куда вставлять
уже разобрался. Как сделать, чтоб не прыгала страница вверх, при нажатии на "Показать решение"
Ответить с цитированием
  #10 (permalink)  
Старый 21.12.2013, 18:42
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

http://learn.javascript.ru/play/No5aAb
смотрите решение на js второе
<head>
    <style>
      .link {
        border:none;
        background-color: transparent;
        text-decoration: underline;
        color: #476C8E;
        display: block;
        outline: none;
        cursor: pointer;
      }
      .sp-text {
        display: none;
        border: 1px solid #d5d5d5;
        background-color: #f5f5f5;
        padding: 5px;
      }
    </style>
  </head>
  
  <body>
    <input type="button" onclick="spoiler(this)" value="Показать решение" class="link sp1">
    <div class="sp-text sp1">Ваш текст ...</div>
    <input type="button" onclick="spoiler(this)" value="Показать решение" class="link sp2">
    <div class="sp-text sp2">Ваш текст ...</div>
    <script>
      var spoiler = function (el) {
          var divCls = "div.sp-text." + el.className.split("link ")[1],
            sptext = document.querySelector(divCls);
          if (sptext.style.display == "") {
            sptext.style.display = "block";
            el.value = "Закрыть";
          } else {
            sptext.style.display = "";
            el.value = "Показать решение";
          }
        };
    </script>
  </body>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как с помощью javascript установить selected для тега option? re-kru-t Общие вопросы Javascript 1 19.02.2011 15:49
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34