Question

我有一个包含动态创建行（'s）的表 - 每个都是一组输入，其中一个是自动完成输入字段，用户可以在其中搜索项目并获得一个选项列表，当它们出现时选择一个，其所有剩余字段中都会填充其ITEM的详细信息，并从数据库中调用与其选择对应的图像。

这是我的数据库调用查询：

$return_arr = array();
$param = $_GET["term"];
$fetch = mysql_query("SELECT * FROM crd_jshopping_products WHERE `name_en-GB` REGEXP '^$param' LIMIT 5");
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $row_array['product_name']  = $row['name_en-GB'];
    $row_array['category']  = $row ['meta_keyword_en-GB'];
    $row_array['jshop_code_prod'] = $row['product_ean'];
    $row_array['_ext_price_html']  = number_format($row['product_price'],2);

    if (!empty($row['product_thumb_image']) AND isset($row['product_thumb_image'])){
        $row_array['image'] = $row['product_thumb_image'];      
    }else {
        $row_array['image'] = 'noimage.gif';    
    }
    array_push( $return_arr, $row_array );
}   
mysql_close($conn);
echo json_encode($return_arr);

在我的JQuery中，我所要做的就是放置它：

$('#prodImage').append('<img class="imgLoads" src="/components/com_jshopping/files/img_products/' + ui.item.image + '" >');

因此它会将Image放入div ID：prodImage。

我尝试了IF语句：

if ($('#prodImage').length)
{
    $('#prodImage').append('<img class="imgLoads" src="/components/com_jshopping/files/img_products/' + ui.item.image + '" >');
}
else {
    $('#prodImage').remove();                                       
}

而且......

if (!$('#imgLoads').length)
{
    $('#prodImage').append('<img class="imgLoads" src="/components/com_jshopping/files/img_products/' + ui.item.image + '" >');
}
else if($('#imgLoads').length){
    $('#prodImage').remove();                                       
}

以及一大堆变体和replaceWith()陈述，但无济于事。

您可以在此处查看实时界面：

http://cardoso.co.za/index.php/login-shop

用户名：stackUser

密码：演示

最好的情况是，图像会堆叠在一起......

感谢任何帮助。我也试过以下帖子，但它没有用:( Change image src with jQuery autocomplete

在回应RST的代码片段时，以下是我试图实现它的方式，以便它只更改autocomlete ifield更改的精确TR中的图像：

     $(this).closest('#product_name').blur(function(){
              $('.imgLoads').attr('src','/components/com_jshopping/files/img_products/' + ui.item.image);
          });

这就是我解决问题的方法：

    $(this).closest('tr').find('#product_name').blur(function(){
    $(this).closest('tr').find('.imgLoads').attr('src','/components/com_jshopping‌/files/img_products/' + ui.item.image);
    $(this).closest('tr').find ('.imgLoads').attr('style','border-r‌adius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;border:solid 1px #CF3;');
    });

Answer 1

在您的HTML设置中，图片标记已经

<div id="prodImage">
   <img class="imgLoads" src="">
</div>

的jQuery

$('.imgLoads').attr('src','/components/com_jshopping/files/img_products/' + ui.item.image);

此代码应该包含在函数中，例如：

$('#some-element-id').change(function(){
   $('#prodImage img.imgLoads').attr('src','/components/com_jshopping/files/img_products/' + ui.item.image);
)};

因此，它会在选择时进行调整。

Answer 2

通过使用此代码解决，在调整了很多东西后，再次感谢RST！

    $(this).closest('tr').find('#product_name').blur(function(){
    $(this).closest('tr').find('.imgLoads').attr('src','/components/com_jshopping‌/files/img_products/' + ui.item.image);
    $(this).closest('tr').find ('.imgLoads').attr('style','border-r‌adius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;border:solid 1px #CF3;');
    });

更改自动填充输入时更改动态加载的图像

2 个答案: