Question

首先，我的javascript非常有限，所以我不会在这个上尝试任何东西，因为我不知道从哪里开始

所以，我在我的网站上有这个结构，

＆＃13;

ul{list-style-type: none;padding:0}

＆＃13;

<button class="clickme" type="button">Click Me!</button>

<ul>
 
    <li id="colors_body"><input type="text" class="color_input" value="ffffff"></li>
    <li id="colors_wrapper"><input type="text" class="color_input" value="000000"></li>
    <li id="colors_footer"><input type="text" class="color_input" value="575757"></li>
    
    <!--There will be at least 30-40 of elements like this that contains text input tags-->
    
    <!--And, this list arent always have Text inputs tags, there are also other tags for example, radio, select...etc-->
    <!-- <li id="radio-toggle"><input type="radio" class="radio_input" value="toggle"></li> -->
</ul>

<div class="list">

</div>

＆＃13;

基本上，一堆li个标记，每个标记都有一个特定的ID，每个标记都包含一个文本input标记，它们有一个名为color_input的类

因此，点击clickme按钮时，我想列出所有li ID 名称，并在div中输入值 <登记/> 例如，点击clickme按钮我想得到一个像这样的列表

'colors_body' => 'ffffff',  
'colors_wrapper' => '000000',  
'colors_footer' => '575757',

编辑：但是我需要获取一个文本输入标签仅用于颜色的列表，这应该很容易映射列表，因为这个输入标签有一个名为{{1}的特定类} 之所以这样，是因为还有其他输入类型，如收音机，选择...等等

Answer 1

您应该将事件点击附加到clickme按钮，如：

$('.clickme').on('click', function(){
  //Your logic here
});

然后使用li方法遍历所有each()，并使用jQuery方法div将值设置为append()：

$('div').append( $(this).attr('id') + ' => ' + $('input', this).val() + '<br/>' );

希望这有帮助。

$('.clickme').on('click', function(){
  $('ul li').each(function(){
     $('div').append( $(this).attr('id')+' => '+$('input', this).val()+'<br/>' );
  })
});

ul{list-style-type: none;padding:0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clickme" type="button">Click Me!</button>

<ul>
 
    <li id="colors_body"><input type="text" value="ffffff"></li>
    <li id="colors_wrapper"><input type="text" value="000000"></li>
    <li id="colors_footer"><input type="text" value="575757"></li>
    
</ul>

<div class="list">

</div>

Answer 2

不出所料，用jQuery做这件事是件小事。

你需要像这样抓住元素.clickme的点击次数：

$('.clickme').click(function() {
});

在其中，使用jQuery .each()循环对每个li执行一个函数，其id以colors_开头：

  $('li[id^="colors_"]').each(function() {
  });

并在其中，获取元素的id和文本，并用它做任何你想做的事情（在这个例子中我console.log ged）

    console.log($(this).attr('id') + " => " + $(this).children('input[type=text]').val());

$('.clickme').click(function() {
  $('li[id^="colors_"]').each(function() {
    console.log($(this).attr('id')+" => "+$(this).children('input[type=text]').val());
  });
});

ul {
  list-style-type: none;
  padding: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="clickme" type="button">Click Me!</button>
<ul>
  <li id="colors_body"><input type="text" value="ffffff"></li>
  <li id="colors_wrapper"><input type="text" value="000000"></li>
  <li id="colors_footer"><input type="text" value="575757"></li>
</ul>

Answer 3

在list-items上使用纯JS：Array.prototype.forEach，我们可以做到这一点。

document.querySelector(".clickme").addEventListener("click", function(){
  
  var div = document.querySelector("div.list");
  //Iterate over every li
  Array.prototype.forEach.call( document.querySelectorAll("ul > li[id^='color_']"), function(element){
    var node = document.createTextNode(element.id + " => " + element.querySelector("input").value);
    div.appendChild(node);
    div.appendChild(document.createElement("br"));
  });
  
}, true);// assign click handler to button

ul{list-style-type: none;padding:0}

<button class="clickme" type="button">Click Me!</button>

<ul>
 
    <li id="colors_body"><input type="text" value="ffffff"></li>
    <li id="colors_wrapper"><input type="text" value="000000"></li>
    <li id="colors_footer"><input type="text" value="575757"></li>
    
</ul>

<div class="list">

</div>

Answer 4

使用首先需要的地图创建对象，然后将其附加到list - 请参阅下面的演示：

jQuery 解决方案：

$('.clickme').click(function() {
  $('ul li').map(function() {
    return {
      name: this.id,
      value: $(this).find('input').val()
    }
  }).get().forEach(function(e) {
    $('.list').append('<div>' + e.name + ' => ' + e.value + '</div>');
  });
});

ul {list-style-type: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clickme" type="button">Click Me!</button>
<ul>
  <li id="colors_body"><input type="text" value="ffffff"></li>
  <li id="colors_wrapper"><input type="text" value="000000"></li>
  <li id="colors_footer"><input type="text" value="575757"></li>
</ul>

<div class="list"></div>

Javascript 解决方案：

document.querySelector('.clickme').addEventListener('click', function() {
  Array.prototype.map.call(document.querySelectorAll('ul li'), function(e) {
    return {
      name: e.id,
      value: e.querySelector('input').value
    }
  }).forEach(function(e) {
  
    document.querySelector('.list').innerHTML += '<div>' + e.name + ' => ' + e.value + '</div>';
  });
});

ul {list-style-type: none;}

<button class="clickme" type="button">Click Me!</button>
<ul>
  <li id="colors_body"><input type="text" value="ffffff"></li>
  <li id="colors_wrapper"><input type="text" value="000000"></li>
  <li id="colors_footer"><input type="text" value="575757"></li>
</ul>

<div class="list"></div>

Answer 5

使用querySelectorAll＆amp; children获取相关数据。

＆＃13;

document.getElementById('clickMe').addEventListener('click', function() {
  let inputText = "";
  var obj = {};
  document.querySelectorAll('li').forEach(function(item) {
    inputText += item.id + ' ' + item.children[0].value + '<br/>'

  })
  document.getElementsByClassName('list')[0].innerHTML = inputText


})

＆＃13;

ul {
  list-style-type: none;
}

＆＃13;

<button class="clickme" type="button" id="clickMe">Click Me!</button>

<ul>

  <li id="colors_body"><input type="text" value="ffffff"></li>
  <li id="colors_wrapper"><input type="text" value="000000"></li>
  <li id="colors_footer"><input type="text" value="575757"></li>

</ul>

<div class="list">

</div>

＆＃13;

单击jQuery / JavaScript，列出ID的名称

5 个答案: