Question

=“”

我有一个系列点击的图标打开各种工具提示弹出窗口，用户可以在其中执行操作，例如更新产品的元标记

一个这样的图标就像这样编码

<input type="image" class="icon-meta meta-288" src="images/icon_edit_metatags_off.png" border="0" alt="Meta Tags" title="Meta Tags">

当用户添加了所需内容后，我想将图标从icon_edit_metatags_off.png更改为icon_edit_metatags_on.png

在我的AJAX的php文件中，我有以下

if (zen_get_metatags_keywords($products_id, (int)$_SESSION['languages_id']) or zen_get_metatags_description($products_id, (int)$_SESSION['languages_id'])) {
    $metatag_icon = '<input type="image" class="icon-meta meta-'.$products_id.'" src="images/icon_edit_metatags_on.png" border="0" alt="Meta Tags" title="Meta Tags" />';
} else {
    $metatag_icon = '<input type="image" class="icon-meta meta-'.$products_id.'" src="images/icon_edit_metatags_off.png" border="0" alt="Meta Tags" title="Meta Tags" />';
}
echo json_encode(array('meta'=>$metatag_icon, 'asHtml' => '<div class="alert alert-info admin-meta-update-success"><strong>Meta Tags Updated</strong></div>'));

我的剧本是

$('.product-meta-tags').submit(function(e){
        e.preventDefault();
        $.ajax({
            url: 'update_product_meta_tags_ajax.php',
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'html'
        })
        .done(function(data) {
            var obj = JSON.parse(data);
            console.log(obj.meta);
            $('.tooltip-metatags-<?php echo $products_id; ?>').tooltipster('close');
            var elem = $('.update-<?php echo $products_id; ?>');
            var elem2 = $('.meta-<?php echo $products_id; ?>');
            elem.fadeOut('slow', function() {
                elem.html(obj.asHtml).fadeIn('slow', function() {
                    elem.delay(1200).fadeOut('slow');
                });
            });
            elem2.fadeOut('slow', function() {
                elem2.html(obj.meta).fadeIn('slow');
            });
        })
        .fail(function(){
            alert('Ajax Submit Failed ...'); 
        });
    });

当工具提示关闭时，原始图标会淡出，但不是显示已更改的状态，而是显示原始图像。

如果我在图标上查看来源，则HTML已更改为

<input type="image" class="icon-meta meta-288" src="images/icon_edit_metatags_off.png" border="0" alt="Meta Tags" title="Meta Tags"><input type="image" class="icon-meta meta-288" src="images/icon_edit_metatags_on.png" border="0" alt="Meta Tags" title="Meta Tags"></input>

我认为AJAX成功的内容只会取代最初在div中的内容，因为我习惯于更新显示的价格等，但它似乎只是附加它。

我确实尝试使用类似

之类的东西直接定位src

$("#elementId").attr("src","value");

但这给了我一个基本的图像，而不是替换用作输入src的那个。

我在哪里错了？

Answer 1

我已经通过对ajax .php文件和Ajax成功脚本的一些编辑解决了我的问题。我实际上是在.attr（“src”，“value”）的正确行;但在我写的代码中有一些错误。为了将来访问此帖子的任何人的利益，我将我的ajax .php文件的相关部分更改为

equals

并将我的脚本更新为

if (zen_get_metatags_keywords($products_id, (int)$_SESSION['languages_id']) or zen_get_metatags_description($products_id, (int)$_SESSION['languages_id'])) {
    $metatag_icon = "images/icon_edit_metatags_on.png";
} else {
    $metatag_icon = "images/icon_edit_metatags_off.png";
}
echo json_encode(array('meta'=>$metatag_icon, 'asHtml' => '<div class="alert alert-info admin-meta-update-success"><strong>Meta Tags Updated</strong></div>'));

我现在在div位置暂时显示成功消息，并且图标会更改以显示已设置元标记。

替换<input type =“image”之后的img src =“”ajax =“”success =“”

1 个答案: