Форум

mepihin · #1 (**permalink**) 09.05.2014, 04:10

Например у нас есть 3 тега с некоторым текстом. Надо реализовать такую систему, что при клике на ссылку "влево" или "вправо" отображался следующий элемент, а остальные скрывались.
Есть предположение, что можно каждый клик скрывать все тексты, а лишь через .get(current), где current - переменная, к которой прибавляется значение или отнимается, просто с добавление .css() показывать текущий. Вопрос таков: насколько это логично, оптимизировано и есть ли способ проще с манипуляцией скрытия всех элементов кроме того, который соответствует переменной current, являющейся индексом элементов ?

Aetae · #2 (**permalink**) 09.05.2014, 04:34

В качестве шутки, 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>

mepihin · #3 (**permalink**) 09.05.2014, 04:42

Aetae, А вот как через jQuery организовать метод, который я предлагал? У меня что-то не выходит показать только текущий элемент.

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

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

Тут я скрыл все . Но вот как теперь открыть лишь тот, индекс которого равен переменной current ?

jsnb · #4 (**permalink**) 09.05.2014, 05:09

Сообщение от mepihin

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

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

Тут я скрыл все . Но вот как теперь открыть лишь тот, индекс которого равен переменной current ?

allP.eq(current).show();

depp · #5 (**permalink**) 09.05.2014, 21:14

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

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>

Форум

Справочник

Discord чат

Курсы javascript