JQuery. Переместить дочерние данные добавления

Question

JQuery. Переместить дочерние данные добавления

0

У меня есть список (динамический), в котором FIRST LI скрыт, но содержащиеся в нем данные вставляются в заголовок div выше. У меня есть два якоря, которые перемещают список вверх и вниз.

Я пытаюсь сделать так, чтобы пользователь щелкнул, второй элемент списка перемещается в начало списка (и его данные добавляются в заголовок), и фактический LI скрывается. И если пользователь нажимает вниз, последний элемент списка перемещается на передний план (его данные снова добавляются в заголовок, и он скрывается)

Я не могу заставить элементы списка перемещаться по кликам

HTML

<div class="top">
  <a href="#" onclick="slide('up')"></a>
  <h1 class="mainTitle"></h1>
  <a href="#" onclick="slide('down')"></a>
</div>

<ul>
 <li><span class="subtitle">Title 1</span></li>/*First div always hidden and data appended to h1*/
 <li><span class="subtitle">Title 2</span></li>
 <li><span class="subtitle">Title 3</span></li>
 <li><span class="subtitle">Title 4</span></li>
 <li><span class="subtitle">Title 5</span></li>
</ul>

JQuery

$(document).ready(function () {
    $('li:first-child').css('display', 'none');
    $('.mainTitle').append($('li:first-child .subtitle').html());


    function slide(direction) {
      if (direction === 'up') {
        $('li:first-child').before($('li:last-child'));
      } else {
        $('li:last-child').before($('li:first-child'));
      }
    }

});

user934902 22 окт. 2013, в 23:00

Источник

0

Разве вы не получаете сообщение об ошибке в консоли Javascript?
Barmar 22 окт. 2013, в 20:35
0

Да, это выглядит как неопределенное, я изменил имя функции, как упоминалось ниже, до сих пор не определено
user934902 22 окт. 2013, в 20:43
0

Потому что это не глобальная функция, как говорится в моем ответе.
epascarello 22 окт. 2013, в 20:47
0

Вместо .css('display', 'none'); Вы можете просто использовать .hide() .
Bram Vanroy 22 окт. 2013, в 21:01

Показать ещё 2 комментария

Теги:

javascript

jquery

2 ответа

0

Измените inline на jQuery a la ':

$( ".subtitle").click(slide(up););

http://api.jquery.com/click/

Или с ванилью JS:

document.getElementById('.subtitle').onmousedown = function() {
    slide();

};

Затем удалите функцию слайда из блока jQuery, который вы указали в своем вопросе, и проблемы с областью действия исчезнут.

baordog 22 окт. 2013, в 18:53

Ещё вопросы

Разве вы не получаете сообщение об ошибке в консоли Javascript?
Да, это выглядит как неопределенное, я изменил имя функции, как упоминалось ниже, до сих пор не определено
Потому что это не глобальная функция, как говорится в моем ответе.
Вместо .css('display', 'none'); Вы можете просто использовать .hide() .

epascarello · Accepted Answer · 2013-10-22T19-24-00.000Z

Вы не можете вызвать слайд, потому что функция является областью не глобальной. Удалите функцию из готового вызова. Лучшее решение, добавьте события с помощью jQuery, а не в строку.

Решение 1

$(document).ready(function () {
    $('li:first-child').css('display', 'none');
    $('.mainTitle').append($('li:first-child .subtitle').html());
});

function slide(direction) {
  if (direction === 'up') {
    $('li:first-child').before($('li:last-child'));
  } else {
    $('li:last-child').before($('li:first-child'));
  }
}

Лучшее решение

$(document).ready(function () {
    $('li:first-child').css('display', 'none');
    $('.mainTitle').append($('li:first-child .subtitle').html());    

    function slide(direction) {
      if (direction === 'up') {
        $('li:first-child').before($('li:last-child'));
      } else {
        $('li:last-child').before($('li:first-child'));
      }
    }

    $(".top").on("click","a",function(e){
        slide( $(this).data("direction") );
        e.preventDefault();
    });
});

и HTML:

<div class="top">
  <a href="#" data-direction="up"></a>
  <h1 class="mainTitle"></h1>
  <a href="#" data-direction="down"></a>
</div>