2013-07-28 1 views
0

Поиск везде, но не удается найти ответ на эту проблему. Когда я нажимаю на кнопку, я хочу, чтобы контент перемещался из одного div в другой, а затем снова щелкнул, чтобы вернуться назад. Можете сделать начальный ход без проблем, но это возвращение.переключает перемещение содержимого с одного div на другой

Вот мой код до сих пор ...

$(document).ready(function(){ 
    $(function(){$('#button').click(function() { 
     $(this).val() == "Move Content" ? initial_move() : move_back(); 
     }); 
    }); 

    function initial_move() { 
     $('#button').val("Move Back"); 
     $("#two").append($("#toggle_txt").html()); 
     $('div#one #toggle_txt').remove(); 
    }; 

    function move_back() { 
     $('#button').val("Move Content"); 
     $("#one").append($("#toggle_txt").html()); 
     $('div#two #toggle_txt').remove(); 
    }; 
}); 


<input type="button" value="Move Content" id="button" /><br/><br/> 

<div id="one"> 
    <p>Div One permanent text</p> 
    <p id="toggle_txt">Text to toggle between the two</p> 
</div> 
<br/> 
<div id="two"> 
    <p>Div Two permanent text</p> 
</div> 

http://jsfiddle.net/eBuAz/

Я не понимаю, почему этот код не должен работать. Любая помощь очень ценится.

Благодаря

ответ

0

Когда вы делаете

$('div#one #toggle_txt').remove(); 

вы на самом деле это удаление из DOM, поэтому не должен быть добавлен обратно без текста.

0
jQuery(document).ready(function ($) 
{ 
    $(function(){$('#button').click(function() 
    { 
     $(this).val() == "Move Content" ? initial_move() : move_back(); 
    }); 
    }); 

    function initial_move() { 
     $('#button').val("Move Back"); 
     var toggle = $("#toggle_txt"); 
     $("#two").append(toggle).html(); 
     $('div#one #toggle_txt').remove(); 
     toggle.attr('id', "toggle_txt"); 
    }; 

    function move_back() { 
     $('#button').val("Move Content"); 
     var toggle = $("#toggle_txt"); 
     $("#one").append(toggle).html(); 
     $('div#two #toggle_txt').remove(); 
     toggle.attr('id', "toggle_txt"); 
    }; 
}); 
+0

Это замечательно @Samurai благодарит так много. Я изучаю ваш ответ, пытаясь разобраться в логике. В initial_move() мы удаляем #toggle_txt из div # one, но тогда мы не применяем id toggle_txt к элементу, который уже имеет его? Он отлично работает, поэтому я могу использовать его, но просто приятно получить логику в моей голове. Я очень ценю, что вы нашли время. –

+0

Спасибо @ defau1t Я довольно новичок в jquery, поэтому я вижу, что вы говорите, и это имеет смысл. Самурай придумал решение. Я заметил в исходном коде, что позиция div не изменяется, но визуально перемещается. Цените свой комментарий. –

+0

Что вы делаете, так это добавление содержимого элемента один в элемент два, тогда вы удаляете элемент с id toggle_txt. Поэтому, когда вы снова нажимаете (при возврате назад), на самом деле нет элемента с идентификатором toggle_txt. Я добавил, что я храню элемент в переменной, а затем устанавливаю его id toggle_txt после предыдущего элемента с удалением этого идентификатора. – Samurai

Смежные вопросы