Javascript.RU

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

Скрывать все P, кроме текущего
Например у нас есть 3 тега <p> с некоторым текстом. Надо реализовать такую систему, что при клике на ссылку "влево" или "вправо" отображался следующий элемент, а остальные скрывались.
Есть предположение, что можно каждый клик скрывать все тексты, а лишь через .get(current), где current - переменная, к которой прибавляется значение или отнимается, просто с добавление .css() показывать текущий. Вопрос таков: насколько это логично, оптимизировано и есть ли способ проще с манипуляцией скрытия всех элементов <p> кроме того, который соответствует переменной current, являющейся индексом элементов <p>?
Ответить с цитированием
  #2 (permalink)  
Старый 09.05.2014, 04:34
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

В качестве шутки, css-only.)
<style>
input[name="radio"], p{
    display: none
}
input[name="radio"]:checked + p{
    display: block
}
</style>
<input type="radio" name="radio" id="radio1" checked>
<p>
    <label for="radio2">вперёд</label>
    <br>p1
</p>
<input type="radio" name="radio" id="radio2">
<p>
    <label for="radio1">назад</label> | 
    <label for="radio3">вперёд</label>
    <br>p2
</p>
<input type="radio" name="radio" id="radio3">
<p>
    <label for="radio2">назад</label>
    <br>p3
</p>
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 09.05.2014, 04:42
Новичок на форуме
Отправить личное сообщение для mepihin Посмотреть профиль Найти все сообщения от mepihin
 
Регистрация: 09.05.2014
Сообщений: 2

Aetae, А вот как через jQuery организовать метод, который я предлагал? У меня что-то не выходит показать только текущий элемент.
var allP = $('p');
    var current = 0;

    allP.each(function () {
       allP.css('display', 'none');
    });

Тут я скрыл все <p>. Но вот как теперь открыть лишь тот, индекс которого равен переменной current ?
Ответить с цитированием
  #4 (permalink)  
Старый 09.05.2014, 05:09
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Сообщение от mepihin Посмотреть сообщение
var allP = $('p');
    var current = 0;

    allP.each(function () {
       allP.css('display', 'none');
    });

Тут я скрыл все <p>. Но вот как теперь открыть лишь тот, индекс которого равен переменной current ?
allP.eq(current).show();
Ответить с цитированием
  #5 (permalink)  
Старый 09.05.2014, 21:14
Профессор
Отправить личное сообщение для depp Посмотреть профиль Найти все сообщения от depp
 
Регистрация: 22.04.2014
Сообщений: 151

var allP = $('p');
    var current = 0;

    allP.each(function () {
       allP.css('display', 'none');
    });

это ж...:
$('p').hide().eq(current).show();
Ответить с цитированием
  #6 (permalink)  
Старый 10.05.2014, 00:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

mepihin,
<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selectable demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <style>
    p{ display: none; }
    .selected {  display: block;  }
  </style>
  <script>
   $(function()
     {
       var p = $("p");
       p.first().addClass("selected");
            $(document).on("click", ".next, .prev", function(event)
         {
           event.preventDefault();
           var selected = $(".selected");
           selected.removeClass("selected");
           if($(this).hasClass("next") ) {
             selected = selected.next('p').size()? selected.next():p.first() ;
           }
           else {
             selected = selected.prev('p').size()? selected.prev():p.last();
           }
           selected.addClass("selected");
         }
       )
     }
   );
  </script>
</head>

<body>
  <a href="" class="prev">prev</a> <a href="" class="next">next</a>
  <p>1</p><p>2</p><p>3</p>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Регулярка - все символы кроме (для имени файла) allanmiln Events/DOM/Window 2 18.11.2013 19:18
yandex map region как скрыть все кроме карты России Telnet Общие вопросы Javascript 0 05.10.2013 15:38
Как разблокировать все checkbox? wofat jQuery 1 06.04.2013 13:55
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Скрипт не работает во всех браузерах, кроме Оперы Yadooumne! Элементы интерфейса 6 27.10.2008 17:08