Question

在管理网页中，我有一个包含许多项目的列表，并且在每个项目中都有一个按钮，允许为最终用户显示或隐藏这些项目。当项目显示时，按钮是一个睁开眼睛的图像。当图像隐藏时，按钮是闭眼图像。这个怎么运作？例如，在隐藏项目中，按钮是闭着眼睛的图像。因此，当我点击按钮显示项目时，该项目将显示给用户，并且图像会因打开的眼睛而改变。

我正在使用ajax + jquery。

问题是，当我点击按钮显示或隐藏项目时，图像和他的属性不会改变！ ajax正在工作，但图像按钮没有改变。

的Ajax：

$(document).on('click', '#UpdatePreview', function(e){

    e.preventDefault();

    var uid = $(this).attr('name');
    var eye = $(this).children('#imgEye').attr('name');

    $.ajax({
        url: 'previewLeiame.php',
        type: 'POST',
        data: {id: uid},
        dataType: 'html',
        success: function(data) {
            if(eye == "visualized") {
                $(this).children('#imgEye').attr('src', '../imgs/btn/no-eye-icon.png');
                $(this).children('#imgEye').attr('name', 'hidden');
                $(this).children('#imgEye').attr('title', 'Hidden');
            } else if(eye == "hidden") {
                $(this).children('#imgEye').attr('src', '../imgs/btn/eye-icon.png');
                $(this).children('#imgEye').attr('name', 'visualized');
                $(this).children('#imgEye').attr('title', 'Visualized');
            }
        }
    });

});

HTML：

<td width="35" align="center">
    <?php
        if($data['preview'] == 0) {
    ?>
            <a id="UpdatePreview" name="<?php echo $data['id']; ?>"><img id="imgEye" name="hidden" title="Hidden" src="../imgs/btn/no-eye-icon.png" /></a>
    <?php
        } else { ?>
            <a id="UpdatePreview" name="<?php echo $data['id']; ?>"><img id="imgEye" name="visualized" title="Visualized" src="../imgs/btn/eye-icon.png" /></a>
    <?php }
        ?>
</td>

任何人都可以帮助我吗？谢谢！

Answer 1

this回调中的

success未引用DOM元素，因此$(this).children('#imgEye')将为空。

如果您在Ajax调用之外存储了对该元素的引用，那将会简单得多。

var img = $(this).children('#imgEye');

$.ajax({
  // ...
  success: function() {
    // ...
    img.attr(...);
  }.
});

如果您真的希望this引用DOM元素，请参阅$(this) inside of AJAX success not working。

ajax调用

1 个答案: