如何通过锚点复制点击的值并通过输入添加这个值并移除？

Question

代码没有按照我想要的方式运行。就是通过anchor复制click的值，通过input和remove添加这个值。你能帮助我吗？该代码用于该领域的交互功能。我正在创建一个表单，并且正在尝试添加此功能。我的想法是……

用伪算法解释思路和代码

if (click) { remove input }
input. removed { step 1 }
Step 1 :: Now add this <a> 1 anchor </a>

if ( click ) {   if (step1) is 'correct'! {    else (copy text value) .create input   }  createinput 'is'   }   'is'  =  input.add {  ( add text value ) }
       
now: remove the anchor ^ step2 ^ 
Step 2 :: Now add this <input></input>
end-script

翻译 1

1. 删除输入并添加锚点。
2. 添加锚点，如果（单击）...在（输入）中添加文本值。
3. 要添加输入，请创建一个新输入，然后删除锚。

翻译 2

  HTML(Values.txt) is '<a href="#">Presencial</a>'
  HTML(Values.txt) is'<a href="#">Online</a>'

  take.valueTXT ( Presencial, Online) = Text.content for Value.Input )

  'take.valueTXT' 'is' ( expression )  
     
   '(expression)' 'is'  'rule' 

   'rule' is $("#presencial,#online").text($('#inscricao').val(););

翻译 3

$(function()
{
    var find = $("#presencial, #online").text("");
    var add = $("#input").val("");
    var make = find to add; 
    
   $('<input>').addClass('inscricao u-full-width').attr({id: 'inscricao'});


});

翻译 4

function myFunction() {
  var x = document.getElementById("#presencial,#online").innerText;
  var a = $("#inscricao").val();
  a = x;  

翻译 5

$("#presencial,#online").text($("#inscricao").val();)

翻译 6

      $("#presencial,#online").click(function() {
       $("#presencial,#online").text( $("#inscricao").val(); )
       $("#presencial,#online").remove();
       $("input").add(); // add input
   });

翻译 7

document.getElementById("#presencial,#online").innerText;.$("#inscricao").val(); 

错误，源代码

// script 1
$("#inscricao").one("click", function() {
    $('#inscricao').after('<div style="text-align:center"><a id="presencial" style="text-decoration:none;" href="#">Presencial</a><a id="online"  style="text-decoration:none;">Online</a></div>');
    jQuery('#inscricao').remove();
});
// script 2
      $("#presencial").click(function() { 
                    $("#presencial").val(function(c) { 
                        $('#presencial').after('<input class="inscricao u-full-width" id="colegios" type="text" autocomplete="off" required/>');

/* var take = document.querySelector('#presencial').innerHTML; var adicionar = document.querySelector("#presencial").value = take;  */

                        var c = $("#inscricao").text();
                        return c. 

                        jQuery('#presencial').remove();

                    }); 
                }); 

参考

• https://jsfiddle.net/pedroguilherme/e0b8jrpk/42/
• https://jsfiddle.net/pedroguilherme/82Lbfac1/2/

想法

 var take = document.querySelector('#presencial').innerHTML; var adicionar = document.querySelector("#presencial").value = take;

测试1

$("#inscricao").one("click", function() {
  $('#inscricao').after('<div style="text-align:center"><a onclick="addInput(this.form);copyValue(this.form); removerHere(this.form);" id="presencial" style="text-decoration:none;" href="#">Presencial</a><a onclick="addInput(this.form);copyValue(this.form); removerHe(this.form);" id="online"  style="text-decoration:none;">Online</a></div>');
  jQuery('#inscricao, #label1').remove();
});

$("#unidades").one("click", function() {
  $('#unidades').after('<div style="text-align:center"><a onclick="addInput(this.form);copyValue(this.form); removerHere(this.form);" style="text-decoration:none;">Recife</a><a onclick="addInput(this.form);copyValue(this.form); removerHere(this.form);" href="#" id="jabatao" style="text-decoration:none;">Jabatão</a></div>');
  jQuery('#unidades,#label2').remove();
});

$("#colegios").one("click", function() {
  $('#colegios').after('<div style="text-align:center"><a onclick="addInput(this.form);copyValue(this.form); removerHere(this.form);" href="#" id="cdfmaster" style="text-decoration:none;">CDF Master</a><a onclick="addInput(this.form);copyValue(this.form); removerHere(this.form);" href="#" id="meninojesus" style="text-decoration:none;">Menino Jesus</a><a  onclick="addInput(this.form);copyValue(this.form); removerHe(this.form);" href="#" id="ethos" style="text-decoration:none;">Ethos</a></div>')
  ;
  jQuery('#colegios,#label3').remove();
});

body {
  padding: 20px;
  font-family: Helvetica;
}

input,
label {
  padding: 10px;
  display: inline;
}

label {
  float: left;
}

a {
  padding: 20px;
  color: black;
  font-size: 16px;
  display: flex;
  margin: 20px;
}

a:hover {
  color: blue;
  font-weight: bolder;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="label1">Inscrição</label>
<input id="inscricao">

<label id="label2">Unidades</label>
<input id="unidades">

<label id="label3">Colégios</label>
<input id="colegios">

测试2！

源代码现在可以工作了！ 在此处输入代码；D

步骤/翻译 8！

// $().ready(function(e){}
$("#inscricao").one("click", function() {
    $('#inscricao').after('<div style="text-align:center"><a id="presencial" style="text-decoration:none;">Presencial</a><a id="online"  style="text-decoration:none;">Online</a></div>');
    jQuery('#inscricao').remove();
});


$("#unidades").one("click", function() {
    $('#unidades').after('<div style="text-align:center"><a style="text-decoration:none;">Recife</a><a id="jabatao" style="text-decoration:none;">Jabatão</a></div>');
    jQuery('#unidades').remove();
});


$("#colegios").one("click", function() {
    $('#colegios').after('<div style="text-align:center"><a id="cdfmaster" style="text-decoration:none;">CDF Master</a><a id="meninojesus" style="text-decoration:none;">Menino Jesus</a><a  id="ethos" style="text-decoration:none;">Ethos</a></div>');
    jQuery('#colegios').remove();

});


$("#presencial, #online").click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );  
});

$("#recife, #jabatao").click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );
  <input class="nomecompleto u-full-width" id="nome" type="text" autocomplete="off" required>
});

$("#cdfmaster, #meninojesus, #ethos").click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );

});

源代码步骤

1. 如果（点击）输入...此输入：<input class="inscricao u-full-width" id="nome" type="text" autocomplete="off" required>

2. 所以...删除输入并添加锚点...！这个主播：<a>Presencial</a>Online<a></a>

3. If(click) in anchor "if (click) in anchor is each"....所以...获取值并添加输入。<input class="inscricao u-full-width" id="nome" type="text" autocomplete="off" required>

诀窍

1. 我用 $("#inscricao").one("click", function() { $('#inscricao').after('<div style="text-align:center"><a id="presencial" style="text-decoration:none;">Presencial</a><a id="online" style="text-decoration:none;">Online</a></div>');jQuery('#inscricao').remove();});

步长为 1

1. $("#inscricao").one("click", function() {

描述：使用 id 和 if (click)... 获取输入并... 将 inscricao 替换为 id inscricao....

示例

$('#inscricao').after('<div style="text-align:center"><a id="presencial" style="text-decoration:none;">Presencial</a><a id="online" style="text-decoration:none;">Online</a></div>');

1. jQuery('#inscricao').remove();

示例

$("#inscricao").one("click", function() { $('#inscricao').after('<div style="text-align:center"><a id="presencial" style="text-decoration:none;">Presencial</a><a id="online" style="text-decoration:none;">Online</a></div>');jQuery('#inscricao').remove();});

描述：我在输入中添加点击删除输入并添加锚点。

步骤源代码2

$("#presencial, #online").click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );  
});

描述：如果单击锚点...因此，在输入中添加值文本。 '值文本是来自这里 Presencial 的值'...因此，在输入中添加值是'在 >Presencial

问题

• 如果我在 Source-Code 1 中删除，如何返回输入？

解决！

• 在锚点之后添加！但是，我如何添加？

问题和描述

1. 如何在一个输入中返回...如果单击锚点中的一个？
2. 如何将两个变量合二为一？

示例 1 和 2

$("#inscricao").one("click", function() {
    $('#inscricao').after('<div style="text-align:center"><a id="presencial" style="text-decoration:none;">Presencial</a><a id="online"  style="text-decoration:none;">Online</a></div>');
    jQuery('#inscricao').remove();
$("#presencial, #online").click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );  
});
});

描述：我在尝试这个......但是，没有工作：/

问题

描述：我尝试了一个功能......但是，没有工作：/为什么？

用简单的方法解决

停止编写糟糕的代码！别再当小孩子剧本了！哈哈……^^

怎么做？

1. 阅读http://api.jquery.com/val/#val-function
2. 阅读https://api.jquery.com/click/
3. 使用概念 val-function + click 函数

怎么做？

1. $( "#multiple" ).val([ "Multiple2", "Multiple3" ]);

描述：你在 select 的选项中使用了 id 和 get value。对不起，我不明白......冷静！

1. 所以...添加这个内部值作为值输入！

2. 有了这个...您无需删除输入并添加锚点并添加新输入并删除锚点！

怎么样！？

1. 我不傻，我不懂代码！ ;D

求解步骤

1. $("#multiple").val(["Multiple2","Multiple3"]);
2. Add values of id #Multiple2, #Multiple3 if click in input!

源代码

// set id and add ip select
 $("#presencial,#online").click(function() {
       $("#presencial,#online").text( $("#inscricao").val(); )
     
      // if click in select add value in input
        $("input").add(); // add input
   });


// I tried like this

// If I click in select... So... add value of select in input 
$( "#Multiple2, #Multiple3" ).click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );
  
});

// But, no work... I trying add $(this).prev('input').val("#Multiple2, #Multiple3").click;

Answer 1

您可以使用replaceWith() 方法将锚点替换为输入。使用$(this).text() 获取新输入的值。

使用事件委托来编写锚点的事件处理程序，而不是在每个锚点中放置onclick 属性。见Event binding on dynamically created elements?

$(document).on("click", "a", function() {
  $(this).replaceWith($("<input>", {
    value: $(this).text()
  }));
});

$("#inscricao").one("click", function() {
  $('#inscricao, #label1').replaceWith('<div style="text-align:center"><a id="presencial" style="text-decoration:none;" href="#">Presencial</a><a id="online"  style="text-decoration:none;">Online</a></div>');
});

$("#unidades").one("click", function() {
  $('#unidades,#label2').replaceWith('<div style="text-align:center"><a style="text-decoration:none;">Recife</a><a href="#" id="jabatao" style="text-decoration:none;">Jabatão</a></div>');
});

$("#colegios").one("click", function() {
  $('#colegios, #label3').replaceWith('<div style="text-align:center"><a href="#" id="cdfmaster" style="text-decoration:none;">CDF Master</a><a href="#" id="ethos" style="text-decoration:none;">Ethos</a></div>');
});

body {
  padding: 20px;
  font-family: Helvetica;
}

input,
label {
  padding: 10px;
  display: inline;
}

label {
  float: left;
}

a {
  padding: 20px;
  color: black;
  font-size: 16px;
  display: flex;
  margin: 20px;
}

a:hover {
  color: blue;
  font-weight: bolder;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="label1">Inscrição</label>
<input id="inscricao">

<label id="label2">Unidades</label>
<input id="unidades">

<label id="label3">Colégios</label>
<input id="colegios">