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

Posted 2023-02-22

【中文标题】根据按钮中的数据值设置页面中的值

【英文标题】：Set values in a page according to data-values in a button

【发布时间】：2021-07-04 13:53:29

【问题描述】：

我在一个页面上有以下语句：

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

根据单击的按钮，隐藏字段中的值 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 是不是无法根据类找到按钮？我怎样才能做到这一点？

【参考方案1】：

由于你还没有上传工作模态，我做的是工作，根据你的需要改变。您需要使用$("body") 而不是body

$(".proccard").click(function() 
  var button = $(this);
  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('#proc').val(cardid)
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="proc" id="proc" value="" readonly> <!-- just to show value is changing -->
<img src="/images/test" class="img-fluid" id="procselect" >
<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>

【讨论】：

谢谢！！那成功了！它现在工作得很好！