Home / Questions / 105503
Accepted
Ricardo Sauceda
Asked: 2020-09-28 10:57:06 +0800 CST 2020-09-28 10:57:06 +0800 CST

如何从多个 <a> 标签中获取值并显示在输入文本中？

  • 772

我有一组标签，我希望当我选择一个或多个标签时，每个标签的值都显示在输入文本中。使用此代码，我已经只能显示 1 个标签，但我仍然无法获得超过 2 个标签的值<a>

<input class="tf w-input" id="node" maxlength="256" placeholder="Vida nocturna, el aeropuerto " type="text">

<a class="btn desc fav w-button" id="parque" name="parque" onclick = "add(this);" >PARQUE</a> 

<a class="btn desc fav w-button" id="parque" name="parque" onclick = "add(this);">CENTRO COMERCIAL</a>

<a class="btn desc fav w-button" id="parque" name="parque" onclick = "add(this);">GYM</a>

这是我仅从 PARK 获取值的 Javascript 函数，其他值我无法显示。

function add(x)
{

    var valor = document.getElementById("parque").innerHTML;
    document.interes.node.value = valor;                            

}

我希望你能支持我，我很感激。

javascript

4 Answers

  1. 这是打印页面上所有标签值的函数。

        function imprimeArregloTag(){
     var arrayTag = document.getElementsByTagName('a');
     var arrayText = new Array();

     for(var i = 0; i < arrayTag.length; i++){
      arrayText[i] = arrayTag[i].text
     }

     console.log(arrayText);
   }

    这不是您问题的全部答案，但我认为它可以帮助您。

    • 1

  2. 使用此功能，您将避免在数组中重复值。也就是说，如果您多次单击一个链接，其值将不会在输入文本中重复。

    注意：请记住，为多个 HTML 元素提供相同的 id 不是一个好习惯。就好像您将相同的身份证件授予几个人一样。它们id必须始终是唯一的。

    var arrDatos = new Array();

function add(x) {

  var txtInput = document.getElementById('node');
  var strValor = x.innerHTML;

  arrDatos.pushIfNotExist(strValor, function(e) {
    return e === strValor;
  });


  txtInput.value = arrDatos.toString();
  console.log("Total de elementos actuales: "+arrDatos.length);
  console.log("Estos son los elementos: "+arrDatos);


}

Array.prototype.inArray = function(comparer) {
  for (var i = 0; i < this.length; i++) {
    if (comparer(this[i])) return true;
  }
  return false;
};

Array.prototype.pushIfNotExist = function(element, comparer) {
  if (!this.inArray(comparer)) {
    this.push(element);
  }
};
    <input class="tf w-input" id="node" maxlength="256" placeholder="Vida nocturna, el aeropuerto " type="text" size="200">

<a class="btn desc fav w-button" id="parque1" name="parque" onclick="add(this);">PARQUE</a>

<a class="btn desc fav w-button" id="parque2" name="parque" onclick="add(this);">CENTRO COMERCIAL</a>

<a class="btn desc fav w-button" id="parque3" name="parque" onclick="add(this);">GYM</a>

    • 1

  3. 使用 jquery 你可以这样做：

        $(function(){
          $('.fav').click(function(){
              $("#node").val($(this).html());                                    
          })                                                                       
     });

    如果你想连接你可以做这样的事情：

       var node = $("#node").val();
   $("#node").val(node + $(this).html());

    事实上，你会在你的表中留下一些代码，例如你的 a 中的 id、name 和 onclick

    示例代码位于：https ://jsfiddle.net/madaver1980/494Lg6mq/

    如果你愿意，你可以删除我告诉你的内容，这样你就可以看到它也能正常工作，问候！

    不要忘记添加 jquery src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

    就像我使用 fav 类来提供点击功能一样，如果您有更多带有 fav 类的对象，我也会这样做，所以您必须输入另一个名称，这样您就不会遇到问题。

    • 1
  4. Best Answer

    我会做这样的事情：

    我<a>在给它的那一刻将每个值保留click在 aarray中，并将value其input添加到array转换为 a 的值中string

    var array_valores = Array();

function add(x)
{

    var input = document.getElementById('node');
    array_valores.push(x.innerHTML);

    input.value = array_valores.toString();                         

}
    <input class="tf w-input" id="node" maxlength="256" placeholder="Vida nocturna, el aeropuerto " type="text">

    <a class="btn desc fav w-button" id="parque" name="parque" onclick="add(this);" >PARQUE</a> 

    <a class="btn desc fav w-button" id="parque" name="parque" onclick="add(this);">CENTRO COMERCIAL</a>

    <a class="btn desc fav w-button" id="parque" name="parque" onclick="add(this);">GYM</a>

    希望对你有帮助，问候。

    • 0