Question

我创建了一个显示商店身份证的循环。

该卡的内容包含有关商店的信息（电话，地址......）。该卡有一个用于选择商店的按钮，我想将多个值发送给另一个input。

<li>

<span onclick="doSomething()" value="3">Select this Shop</span>
<input class="info-1" type="hidden" value="footlocker">
<input class="info-2" type="hidden" value="13 street 1000">
<input class="info-3" type="hidden" value="new york city">
<input class="info-4" type="hidden" value="00 22 55 66 33">
<input class="info-5" type="hidden" value="ID shop 6">

</li>


<li>
<span onclick="doSomething()" value="5">Select this Shop</span><br/>
<input class="info-1" type="hidden" value="Mc Donald">
<input class="info-2" type="hidden" value="256 avenue clint">
<input class="info-3" type="hidden" value="San Diego">
<input class="info-4" type="hidden" value="31 64 21 54 12">
<input class="info-5" type="hidden" value="ID shop 34">
</li>
...

信息在此处的输入中发送

<input id="info-1" value="">
<input id="info-2" value="">
<input id="info-3" value="">
<input id="info-4" value="">
<input id="info-5" value="">

我的jQuery

function doSomething(){


    var text= $('.info-1').attr('value');
    $( "#info-1" ).val(text);

    var text =  $('.info-2').attr('value');
    $( "#info-1" ).val(text);

    var text =  $('.info-3').attr('value');
    $( "#info-1" ).val(text);

    var text =  $('.info-4').attr('value');
    $( "#info-1" ).val(text);

    var text =  $('.info-5').attr('value');
    $( "#info-1" ).val(text);
}

此代码不起作用，如果有效，它只发送第一家商店的价值：（。

感谢您的帮助

https://jsfiddle.net/zjo1y4vv/3/

Answer 1

你可以尝试这样的事情:(如果添加其他信息，你可以将代码分解）

＆＃13;

$(".span").click(function(e){

    var infomag = $(this).siblings('.info-1').attr('value');
    $("#info-1").val(infomag);
    
    var text =  $(this).siblings('.info-2').attr('value');
    $("#info-2").val(text);
    
    text =  $(this).siblings('.info-3').attr('value');
    $("#info-3").val(text);
    
    text =  $(this).siblings('.info-4').attr('value');
    $("#info-4").val(text);
    
    text =  $(this).siblings('.info-5').attr('value');
    $("#info-5").val(text);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>

<span class="span" value="3">Select this Shop</span>
<input class="info-1" type="hidden" value="footlocker">
<input class="info-2" type="hidden" value="13 street 1000">
<input class="info-3" type="hidden" value="new york city">
<input class="info-4" type="hidden" value="00 22 55 66 33">
<input class="info-5" type="hidden" value="ID shop 6">

</li>


<li>
<span class="span"  value="5">Select this Shop</span><br/>
<input class="info-1" type="hidden" value="Mc Donald">
<input class="info-2" type="hidden" value="256 avenue clint">
<input class="info-3" type="hidden" value="San Diego">
<input class="info-4" type="hidden" value="31 64 21 54 12">
<input class="info-5" type="hidden" value="ID shop 34">

<br/>
My container where is send the value :<br/>

<input id="info-1" value=""><br/>
<input id="info-2" value=""><br/>
<input id="info-3" value=""><br/>
<input id="info-4" value=""><br/>
<input id="info-5" value=""><br/>

＆＃13;

Answer 2

一些提示和修正：

$('.info-1')会选择多个元素。尝试在正确的上下文中获取唯一的一个元素，例如使用$(this).next('.info-1')或$(this).parent().find('.info-1')
在doSomething()功能中，您只需设置#info-1的值，而不是#info-2等等。
要获取输入的值，请使用.val()代替.attr('value')

Answer 3

JSFIDDLE DEMO

Html应该看起来像这样

<li>
  <span onclick="doSomething(this)" value="3">Select this Shop</span>
  <input class="info-1" type="hidden" value="footlocker">
  <input class="info-2" type="hidden" value="13 street 1000">
  <input class="info-3" type="hidden" value="new york city">
  <input class="info-4" type="hidden" value="00 22 55 66 33">
  <input class="info-5" type="hidden" value="ID shop 6">
</li>
<li>
  <span onclick="doSomething(this)" value="5">Select this Shop</span>
  <br/>
  <input class="info-1" type="hidden" value="Mc Donald">
  <input class="info-2" type="hidden" value="256 avenue clint">
  <input class="info-3" type="hidden" value="San Diego">
  <input class="info-4" type="hidden" value="31 64 21 54 12">
  <input class="info-5" type="hidden" value="ID shop 34">
</li>
<br/> 
My container where is send the value :
<input id="info-1" value="">
<input id="info-2" value="">
<input id="info-3" value="">
<input id="info-4" value="">
<input id="info-5" value="">

JAVASCRIPT

  function doSomething(el) {
    var infomag = $(el).siblings('.info-1').val();
    $("#info-1").val(infomag);

    var text2 = $(el).siblings('.info-2').val();
    $("#info-2").val(text2);

    var text3 = $(el).siblings('.info-3').val();
    $("#info-3").val(text3);

    var text4 = $(el).siblings('.info-4').val();
    $("#info-4").val(text4);

    var text5 = $(el).siblings('.info-5').val();
    $("#info-5").val(text5);
  }

你的小提琴有一些问题。

doSomething(this) - 在您的html中添加参数this
您的身份info-4两次。
使用.siblings查找文字

jQuery在另一个输入中发送多个值

3 个答案: