javascript - 循环数据属性并设置对应的输入值

Question

$(document).on('click', '.atitle', function(){
  //for each data attr - corresponding input value = data.value
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>

结果:
input_x 具有值 lorem
input_y 具有值 ipsum
input_z 的值为 dolor

Answer 1

$(document).on('click', '.atitle', function() {
  // get data of all data attributes 
  // (it's an object like this { x: "lorem", y: "ipsum", ...)}
  let data = $(this).data();
  // Set data to input values.
  Object.entries(data).forEach(([key, value]) => {
    let elem = $(`#input_${key}`);
    // Check if elem exists before trying to assign a value. 
    // Just in case if .atitle contains some data attributes, 
    // which have no mapping to an input element.
    elem && elem.val(value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>