一个事件触发一个类和一个id jQuery

Question

在同一次单击中，我需要在两个不同的字段中添加两个不同值：value和value*50。所以，我试图按类获取一个字段，按ID获取另一个字段。出于某种原因，它不起作用。这是我使用的逻辑。有人能启发我吗？

</script>
<script type="text/javascript">
$('button').on('click', function() {
let value = this.value;
$($(this).data('target')).val(value*50).trigger('input');
});
$('button').on('click', function() {
let value = this.value;
$($(this).attr('id')).val(value).trigger('input');
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="bedroom" data-target=".i1" value="1">1</button>
<input type="text" class="i1" id="i1" name="i1"><br>
<input type="text" id="bedroom">

Answer 1

不能有多个元素具有相同的ID。此外，您不需要为同一按钮编写2个点击事件。

$('button').on('click', function() {
let value = this.value;
$($(this).data('target')).val(value * 50).trigger('input');
$("." + $(this).attr('id')).val(value).trigger('input');
});

演示

$('button').on('click', function() {
let value = this.value;
$($(this).data('target')).val(value * 50).trigger('input');
$("." + $(this).attr('id')).val(value).trigger('input');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="bedroom" data-target=".i1" value="1">1</button>
<input type="text" class="i1" id="i1" name="i1"><br>
<input type="text" class="bedroom">