jQuery/JavaScript 点击后，列出 ID 的名称

Question

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

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

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

<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>

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

所以，在 jQuery 单击 clickme 按钮时，我想列出所有 li ID names 及其输入值在div
例如，在单击 clickme 按钮时，我想获得这样的列表

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

编辑： 但我需要得到一个列表，其中文本输入标签仅用于颜色，这应该很容易映射列表，因为这个输入标签有一个特定的 class 名为 color_input 这样做的原因是因为还有其他输入类型，如收音机、select...等

Answer 1

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

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

然后使用 each() 方法遍历所有 li 并使用 jQuery 方法 append() 将值分配给 div :

$('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_:[=21 开头=]

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

在里面，获取元素的 ID 和文本，然后用它做任何你想做的事（在这个例子中我已经 console.log 得到它）

    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

使用纯 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 & children获取相关数据。

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


})

ul {
  list-style-type: none;
}

<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>

jQuery/JavaScript 点击后，列出 ID 的名称

jQuery/JavaScript on click, list ID's names

html

javascript

jquery

list

jquery-selectors