Html 根据按钮中的数据值设置页面中的值

我在一页上有以下陈述：

<input type="hidden" name="proc" id="proc" value="">
<img src="/images/test" class="img-fluid" id="procselect" alt="">

根据单击的按钮，应从数据字段填充隐藏字段中的值val和图像中的值src

<button type="button" class="btn btn-primary proccard" data-cardid="proc01" data-front="/images/test2.png">Select</button>   
<button type="button" class="btn btn-primary proccard" data-cardid="proc02" data-front="/images/test3.png">Select</button>

我正在使用以下javascript：

$('#ProcModal').on('click', '.proccard', function(event) {
    var button = $(event.relatedTarget)
    var cardid = button.data('cardid') // Extract info from data-* attributes
    var front = button.data('front') // Extract info from data-* attributes
    body.find('#procselect').attr('src', front)
    body.find('form #proc').val(cardid)
    $('ProcModal').modal('hide')
})

When a button is clicked nothing happens and I see the following error in the console:

selectproc.js:6 Uncaught ReferenceError: body is not defined
    at HTMLButtonElement.<anonymous> (selectproc.js:6)
    at HTMLDivElement.dispatch (jquery.min.js:2)
    at HTMLDivElement.v.handle (jquery.min.js:2)

jQuery是否无法根据类找到按钮？我怎样才能做到这一点

由于你还没有上传工作模式，我已经做了是工作，只是根据你的需要改变。您需要使用$body而不是body

$.proccard.clickfunction{ var按钮=$this； var cardid=button.data'cardid'//从数据中提取信息-*属性 var front=button.data'front'//从数据中提取信息-*属性 $body.find'procselect'.attr'src'，front $body.find'proc'.valcardd } 选择

---

谢谢！！这就成功了！！它现在工作得很好！！欢迎光临@SilverDay: