Question

我创建了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的边框将变为红色。我尝试在Google上搜索此方法，但我找不到它，而且我对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>

Answer 1

如果我理解正确，

$(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="">

动态更改基于jQuery div的单击链接时更改文本框的值

1 个答案: