时间戳

首页 > 解决方案 > 单击基于jquery div中的链接时动态更改文本框值

javascript - 单击基于jquery div中的链接时动态更改文本框值

问题描述

我在我想要的地方创建了 HTML，如果用户点击<img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img">然后123456789将动态填充文本框(each-one for different value as in <a> tags)，并且所选 div 的边框将变为红色。我尝试在谷歌上搜索这种方法，但我找不到，而且我熟悉 Js 和 Jquery，所以我不能这样做但是 Stack-overflow 是开发人员的朋友，这里有数百万优秀的开发人员和学生帮助每个人。请帮助我如何制作此功能。

我的代码如下：

<div id="scroll" style="overflow: auto;height:375px">                                
<div class="row pt-5 pb-5 mb-5 this_contact">                                        
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Shiv</span>
<a data-number="123456789" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
<span class="f_13">123456789</span><br>
</div>
</div>                         


<div class="row pt-5 pb-5 mb-5 this_contact">                                        
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Dummy</span>
<a data-number="1253648595" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
<span class="f_13">1253648595</span><br>
</div>
</div>

标签： javascriptjqueryhtml

解决方案

如果我理解正确，

$(function(){
$('.toggle_contact').click(function(){

 var contactNumber = $(this).data('number');
 $(this).parents('.this_contact').addClass('selected').siblings().removeClass('selected');
 $(this).parents().find('input:text').val(contactNumber);
})
})
.selected{
  background-color:red; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroll" style="overflow: auto;height:375px">                                
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Shiv</span>
<a data-number="123456789" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
</div>
</div>                         


<div class="row pt-5 pb-5 mb-5 this_contact">                                        
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Dummy</span>
<a data-number="1253648595" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
</div>
</div>

<input type="text" name='name' value="">

推荐阅读