0

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

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

$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

密码：demo

发生的情况充其量只是图像一个接一个地堆叠在一起......

任何帮助表示赞赏。我也尝试过以下帖子，但没有成功:( 使用 jQuery 自动完成更改图像 src

为了响应 RST 的一段代码，这是我尝试实现它的方式，以便它只更改自动完成 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;');
    });
4

2 回答 2

0

在您的 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);
)};

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

于 2013-05-16T08:12:07.553 回答
0

通过使用此代码解决，经过调整很多东西，再次感谢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;');
    });
于 2013-05-22T06:10:48.170 回答