单击更改图像src和输入值

时间:2015-03-25 13:15:20

标签: jquery

我首先为愚蠢的头衔道歉,但我想不出更好的事情

我需要一些以下脚本的帮助。 我希望当你点击"选择图像"时,你可以点击图像'确定' on,结束其占位符,而值最终隐藏在输入中。 我放了一个插图,还有我现在的代码。

感谢帮助

代码:



$(window).load(function(){
$('.btnChoice').click(function(){
    $('#ImgArcive').show()
    thefield = $(this).prev()
    $('.btnselect').click(function(){
        theselected = $(this).prev()
        thefield.val( theselected.val())
        $('#ImgArcive').hide()
    })
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<div style="width:500px;">
<div style="float:left;margin-right:5px;">
<img border="0" src="http://www.freeimages.com/assets/183414/1834137073/old-paper-1446140-m.jpg" width="120" height="80"><br>
<input id="Img01" name="Img01" type="hidden" value="">
<input id="choice1" class="btnChoice" type="button" value="select image"/>
</div>

<div style="float:left;margin-right:5px;">
<img border="0" src="http://www.freeimages.com/assets/183414/1834137073/old-paper-1446140-m.jpg" width="120" height="80"><br>
<input id="Img02" name="Img02" type="hidden" value="">
<input id="choice3" class="btnChoice" type="button" value="select image"/>
</div>

<div style="float:left;margin-right:5px;">
<img border="0" src="http://www.freeimages.com/assets/183414/1834137073/old-paper-1446140-m.jpg" width="120" height="80"><br>
<input id="Img03" name="Img03" type="hidden" value="">
<input id="choice3" class="btnChoice" type="button" value="select image"/>
</div>

<div style="width:700px;"> </div>
<div id="ImgArcive" style="display:none;margin-top:20px;">
<div style="float:left;margin-right:5px;">
<img border="0" src="http://www.freeimages.com/assets/10/93519/pregnancy-test---positive-1438563-m.jpg" width="120" height="80"><br>
<input id="ch01" name="ch01" type="hidden" value="pregnancy-test---positive-1438563-m.jpg">
<input id="btnsel1" class="btnselect" type="button" value="ok"/>
</div>

<div style="float:left;margin-right:5px;">
<img border="0" src="http://www.freeimages.com/assets/183061/1830607851/chemistry-1416030-m.jpg" width="120" height="80"><br>
<input id="ch02" name="ch02" type="hidden" value="chemistry-1416030-m.jpg">
<input id="btnsel2" class="btnselect" type="button" value="ok"/>
</div>

<div style="float:left;margin-right:5px;">
<img border="0" src="http://www.freeimages.com/assets/183001/1830009907/untitled-1409789-m.jpg" width="120" height="80"><br>
<input id="ch03" name="ch03" type="hidden" value="untitled-1409789-m.jpg">
<input id="btnsel3" class="btnselect" type="button" value="ok"/>
</div>
</div>

</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

看看这个小提琴,这对你有用吗?

https://jsfiddle.net/tzcuzpgt/2/

var image;
var id;

$('.btnChoice').click(function(){
    $('#ImgArcive').show()
    image = $(this).parent().find('img');
    id = $(this).prev().attr("id");
});

$('.btnselect').click(function(){
    var src = $(this).parent().find('img').attr('src');
    $(image).attr('src', src);
    $('#'+id).val(src);
    $('#ImgArcive').hide();
});