Question

我的代码运行良好，但是有一个简单的问题，如果单击一次代码将起作用，但是如果您删除了输入值并再次尝试单击图像，则代码将无法工作：

<div class="images">
    <div class="club">
        <img src="https://cdn-s3.si.com/s3fs-public/2018/07/10/cristiano-ronaldo-juventus-deal.jpg" alt="" />
    </div>
    <div class="club">
        <img src="https://cdn-s3.si.com/s3fs-public/2018/07/10/cristiano-ronaldo-juventus-deal.jpg" alt="" />
    </div>    
</div>

$('.images .club img').click(function (e) {
    e.preventDefault();
    $imageUrl = $(this).attr('src');
    $('.ajax #image').removeAttr('value').attr('value', $imageUrl);
});

Answer 1

使用.val()代替attr

$('.images.club img').click(function (e) {
    $('.text').val($(this).attr('src'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="text"/>
<div class="images club">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>

使用您的代码进行编辑

$('.images .club img').click(function (e) {
    e.preventDefault();
    $('.ajax #image').val( $(this).attr('src'));
});

img{
width:150px;
height:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ajax">
<input id="image"/>
</div>
<div class="images">
    <div class="club">
        <img src="https://cdn-s3.si.com/s3fs-public/2018/07/10/cristiano-ronaldo-juventus-deal.jpg" alt="" />
    </div>
    <div class="club">
        <img src="https://cdn-s3.si.com/s3fs-public/2018/07/10/cristiano-ronaldo-juventus-deal.jpg" alt="" />
    </div>    
</div>

Answer 2

为小提琴添加了解决方案，可以使用.val（）函数更新输入字段。

$('.images .club img').click(function (e) {
    e.preventDefault();
    $imageUrl = $(this).attr('src');
    $('#image').val($imageUrl);
});

https://jsfiddle.net/mdvq94c0/10/

复制图片网址以输入

2 个答案: