Форум

saper333 · #1 (**permalink**) 19.11.2015, 13:24

Здравствуйте. Задачи состоит в следующим, есть много элементов с class="j" которые должны удалится после загрузки страницы, и есть элементы с class="c" которые являются соседними элементами с class="j" и при нажатии на которых должно происходить восстановление элементов с class="j", но не всех, а именно тех который являются соседним нажатого элемента class="c".

структура:

<div>
<div class="c"></div>
<div class=j"></div>
</div>
<div>
<div class="c"></div>
<div class=j"></div>
</div>
<div>
<div class="c"></div>
<div class=j"></div>
</div>

<script>

$(document).ready(function() {
var zag1 = $('.j).detach();
$('.c').live('click', function(e){
$(this).parent().append(zag1);
});
});

</script>

Данный скрипт работает неправильно, он удаляет все элементы с class="j" при загрузке, но при клике на class="c" восстанавливает не соседний удалённый элемент с class="j", а все элементы с class="j". то есть получается вот так:

<div>
<div class="c"></div>
</div>
<div>
<div class="c"></div> ( элемент по которому кликнули )
<div class=j"></div>
<div class=j"></div>
<div class=j"></div>
</div>
<div>
<div class="c"></div>
</div>

а должно получиться вот так:

<div>
<div class="c"></div>
</div>
<div>
<div class="c"></div> ( элемент по которому кликнули )
<div class=j"></div>
</div>
<div>
<div class="c"></div>
</div>

Пожалуйста помогите люди добрые, уже несколько дней себе голову ломаю...

Mess4me · #2 (**permalink**) 19.11.2015, 14:12

saper333,
так

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            border: 1px solid;
        }

    </style>
    <title>Document</title>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
    <div class="c">1</div>
    <div class="j" id="m">2</div>
</div>
<div>
    <div class="c">1</div>
    <div class="j">2</div>
    <div class="j">3</div>
    <div class="j">4</div>
</div>
<div>
    <div class="c">1</div>
    <div class="j">2</div>
    <div class="j">4</div>
    <div class="j">3</div>
    <div class="j">7</div>
</div>

<script>
    $(document).ready(function () {
        $('.j').hide();

        $('.c').click(function () {
            $(this).parent().find('div.j').first().toggle();
        })


    })

</script>

</body>
</html>

рони · #3 (**permalink**) 19.11.2015, 17:49

$(function () {
        $('.j').hide();
        $('.c').click(function () {
            $(this).next().toggle();
        })
    })

saper333 · #4 (**permalink**) 24.11.2015, 16:46

Большое спасибо за ответы

. Но к сожалению примеры немного не те. Нужно чтобы элемент полностью исчезал, как с примером .detach(), а с примером hide() но просто становится невидимым.

Думаю без .detach() в этом выражении не обойтись.

Есть ли ещё какие ни то мысли по этому поводу

Mess4me · #5 (**permalink**) 24.11.2015, 16:51

saper333,
удалялся что ли?

рони · #6 (**permalink**) 24.11.2015, 16:55

saper333,

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            border: 1px solid;
        }

    </style>
    <title>Document</title>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
    <div class="c">1</div>
    <div class="j" id="m">2</div>
</div>
<div>
    <div class="c">1</div>
    <div class="j">2</div>
    <div class="j">3</div>
    <div class="j">4</div>
</div>
<div>
    <div class="c">1</div>
    <div class="j">2</div>
    <div class="j">4</div>
    <div class="j">3</div>
    <div class="j">7</div>
</div>

<script>
 $(document).ready(function() {
    $(".c").each(function(c, a) {
        var b = $(a).nextAll(".j").remove().eq(0);
        $(a).click(function() {
            $(a).nextAll(".j").length ? b.remove() : b.insertAfter(a)
        })
    })
});
</script>

</body>
</html>

saper333 · #7 (**permalink**) 24.11.2015, 19:44

Огромное спасибо, все работает

.
Про такие выражения я даже и не знал

.

Всем спасибо что приняли участие в моей проблеме

рони · #8 (**permalink**) 24.11.2015, 19:50

saper333,
чуть сократил ещё

saper333 · #9 (**permalink**) 25.11.2015, 12:26

Спасибо =). А не подскажите ещё как сделать отложенную загрузку элементов ajax ?

рони · #10 (**permalink**) 25.11.2015, 12:31

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

как сделать отложенную загрузку элементов ajax ?

из разряда как сделать сайт, попробуйте уточнить вопрос.

Форум

Справочник

Discord чат

Курсы javascript