使用jQuery将div中的行附加为textarea值

Question

我的代码可以根据文本区域中逗号分隔的值来附加行。但我想用另一个文本区域的这些行来显示其他值。例如，在另一个文本区域中，我将写入峰值123、峰值342、峰值421、峰值232、峰值748。现在我想显示peak-123和20，peak-342和45，peak-421和60等等。请看一下我的代码，

$(document).ready(function() {
$('.match').on('input', updateMatch)
$('.match').trigger('input')
});
function updateMatch() {
$('.matchi').html($(this).val().split(',').map(e => `<div class='peak' style='left:${e.trim()}%'>${e.trim()}</div>`).join(''));
}

.peak {
background: red;
height: 100%;
width: 0.5%;
position: absolute;
bottom: 0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='match'>
20, 45, 60, 85, 95
</textarea>
<textarea class='match-d'>
peak-123, peak-342, peak-421, peak232, peak748
</textarea>
<div class='matchi' style='position:relative;background:#eee;padding-top:18%' />

Answer 1

好吧，您可以使用索引将peak-x值添加到每个peakdiv。如果值是有序的。意味着第一.match(例如20(对应于第一.match-d(例如峰值-123(，依此类推

$(document).ready(function() {
$('.match').on('input', updateMatch)
$('.match').trigger('input')
$('.match-d').on('input', () =>  $('.match').trigger('input'))
});
function updateMatch() {
const peaksValue = $(".match-d").val().split(',')
$('.matchi').html($(this).val().split(',').map((e, index) => `<div class='peak' style='left:${e.trim()}%'>${e.trim()}<div class="peak-value">${peaksValue[index] ? peaksValue[index]: ''}</div></div>`).join(''));

}

.peak {
background: red;
height: 100%;
width: 0.5%;
position: absolute;
bottom: 0;
display:flex;
flex-direction:column;
align-items: center;
}
.peak-value {
margin-top: auto
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='match'>
20, 45, 60, 85, 95
</textarea>
<textarea class='match-d'>
peak-123, peak-342, peak-421, peak232, peak748
</textarea>
<div class='matchi' style='position:relative;background:#eee;padding-top:18%' />