Скрывать все P, кроме текущего
Например у нас есть 3 тега <p> с некоторым текстом. Надо реализовать такую систему, что при клике на ссылку "влево" или "вправо" отображался следующий элемент, а остальные скрывались.
Есть предположение, что можно каждый клик скрывать все тексты, а лишь через .get(current), где current - переменная, к которой прибавляется значение или отнимается, просто с добавление .css() показывать текущий. Вопрос таков: насколько это логично, оптимизировано и есть ли способ проще с манипуляцией скрытия всех элементов <p> кроме того, который соответствует переменной current, являющейся индексом элементов <p>? |
В качестве шутки, 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>
|
Aetae, А вот как через jQuery организовать метод, который я предлагал? У меня что-то не выходит показать только текущий элемент.
var allP = $('p');
var current = 0;
allP.each(function () {
allP.css('display', 'none');
});
Тут я скрыл все <p>. Но вот как теперь открыть лишь тот, индекс которого равен переменной current ? |
Цитата:
allP.eq(current).show(); |
var allP = $('p');
var current = 0;
allP.each(function () {
allP.css('display', 'none');
});
это ж...:
$('p').hide().eq(current).show();
|
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>
|
| Часовой пояс GMT +3, время: 03:45. |