Копировать / клонировать содержимое div в другой div - PullRequest
Новая
       16

Копировать / клонировать содержимое div в другой div

0 голосов
/ 26 июня 2018

Мне нужно скопировать содержимое из div1 и вставить / добавить его в div2, нажав. Затем, если я изменю содержимое в div1 и снова нажму кнопку, содержимое должно перейти к div3 без изменения содержимого в div2. Это то, что я нашел до сих пор. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  <p>Hello world</p>
</div>
<button onclick="$('#div2, #div3').html($('#div1').html());">Copy</button>
<div id="div2"></div>
<div id="div3"></div>

Поскольку я присваиваю значение, оно вставляется одинаково в оба элемента div, и я понятия не имею, как это сделать отдельно. Думаю, понадобятся петли.

Возможно ли, и если это возможно, кто-нибудь даст мне несколько идей или ссылок для чтения материалов. Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 26 июня 2018

Использование тега сценария с кодом javascript, как в ответе Саифа, вполне допустимо (вам следует только соблюдать осторожность, чтобы не перезаписать глобальную переменную, используемую для подсчета). Чтобы быть более ненавязчивым, событие click также может быть добавлено в тег script.

Как еще одна возможность с противоположным подходом, вы можете делать все в атрибутах кнопки, используя jQuery's data. Здесь счетчик хранится в атрибуте кнопки, но он также может быть сохранен в исходном div #div1. Код: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <p>Hello world</p>
</div>
<button onclick="$('#div' + $(this).data('targetdiv')).html($('#div1').html()); $(this).data('targetdiv', $(this).data('targetdiv') + 1);" data-targetdiv="2">Copy</button>
<div id="div2"></div>
<div id="div3"></div>

Некоторые важные замечания по поводу data: использование data для изменения значения не обновляет сам атрибут DOM, поскольку после получения значения из attibute jQuery использует внутренний код javascript для сохранения значения. Нет реальной необходимости обновлять DOM, но если вы действительно этого хотите, вы можете использовать attr вместо data. Но если вы используете attr, никогда не смешивайте его с вызовами к data, так как последний не увидит обновления DOM после первого получения значения (потому что вместо этого он использует значение, хранящееся во внутреннем кеше JavaScript) чтения атрибута DOM).

0 голосов
/ 26 июня 2018

Я написал небольшой код помощи, чтобы вы начали. Так что я сделал, чтобы переместить логику в функцию, которая выполняет итерацию переменной i (которая может принимать только значения 2 и 3). Это не проверяет, изменился ли текст, и будет перезаписывать div2 и div3 по очереди при каждом щелчке (уберите if test, если вы хотите сделать это только один раз). 

<html>
<body>
<body>
<div id="div1">
    <p>Hello world</p>
</div>
<button onclick="copyPaste()">Copy</button>
<div id="div2"></div>
<div id="div3"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
   var i = 2;
   function copyPaste() {
      //add logic to check if text has changed before executing next line
      $(`#div${i++}`).html($('#div1').html());
      if(i < 3) i = 2; 
   }
</script>
</body>
</html>
0 голосов
/ 26 июня 2018

Вы можете использовать переменную для хранения номера элемента div и затем увеличивать его соответствующим образом. (Здесь я предполагаю, что есть только div2 и div3)

Поскольку вы не упомянули, как значение div1 будет обновляться. Я делаю это вручную, используя $('#div1').html("New Value"); внутри функции add(). 

<html>
<body>
<body>
<div id="div1">
    <p>Hello world</p>
</div>
<button onclick="add()">Copy</button>
<div id="div2"><p>div1 Placeholder</p></div>
<div id="div3"><p>div2 Placeholder</p></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var n = 2;
function add(){
$('#div'+n).html($('#div1').html());
$('#div1').html("<p>New Value</p>");
n++;
}
</script>
</body>
</html>

Попробуйте запустить фрагмент. Нажав на кнопку один раз, вы установите значение div1 в div2, а затем измените исходное содержимое div1 на New Value. Опять же, если вы нажмете кнопку, новое значение div1, т.е. New Value будет установлено в div3.

Хотя это также попытается обновить div1 снова до New Value, что не изменится. Было бы лучше, если бы вы написали некоторые другие способы обновления элемента div1.

Позаботьтесь о теге <p>, если хотите, чтобы он был сохранен. Ну, это также зависит от того, как вы обновите значение div1.

Для добавления вы можете использовать $('#div'+n).append($('#div1').html());

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...