Javascript 在图像之间切换

我有两张图片，我正在锚定标签中使用它们。我在锚定标记的单击事件上使用jquery切换来在图像之间交换

    $(document).ready(function(){
        $('#registrationForm').hide();
        $('#callform').append("<a id='formlink'>IMAGE 1</a>");
        $("#formlink").click(function(){
            $('#registrationForm').toggle(function(){
                $('#formlink').empty().append(IMAGE 2);
            });
        });
    });

$（文档）.ready（函数（）{
$（“#注册表单”）.hide（）；
$（'#callform'）。追加（“图像1”）；
$（“#formlink”）。单击（函数（）{
$（'#registrationForm'）。切换（函数（）{
$（'#formlink'）.empty（）.append（图2）；
});
});
});

这在第一次使用时效果很好，但是每当单击另一个图像时，我想在这两个图像之间切换。

---

有什么想法吗？

您可以在切换到IMAGE1时设置一个标志

selected_image = 'image1'
if(selected_image == 'image1')
    toggle to image 2
else
    toggle to image 1

---

您的代码被设计为在切换完成后附加“IMAGE 2”，而不附加其他内容

您可能需要以下内容：

$("#formlink").click(function(){
    $('#registrationForm').toggle(function(){    
        var imageToShow = $(this).css('display') == 'none')?'IMAGE 1':'IMAGE 2';
        $('#formlink').empty().append(imageToShow);
    });
});

$（文档）.ready（函数（）{
var i=0；
$（“#注册表单”）.hide（）；
$（'#callform'）。追加（“图像1”）；
$（“#formlink”）。单击（函数（）{
$（'#registrationForm'）。切换（函数（）{
如果（++i%2）{
$（'#formlink'）.empty（）.append（图2）；
}否则{
$（'#formlink'）.empty（）.append（图1）；
}
});
});
});

这是我切换图像的方式

 $('.accordion').live('click',function() {
    if($(this).attr("src").indexOf('closed') == -1){
        $(this).attr("src",'img/accordionclosed.gif');
    }else{
        $(this).("src",'img/accordionopen.gif');
    }
 });

---

hth

我建议最初添加两个图像，但隐藏第二个图像。然后，您可以在每次单击链接时切换两个图像，而无需跟踪图像的状态：

$(document).ready(function(){
    $('#callform').append("<a id='formlink1' class='formlink'>IMAGE 1</a>");
    $('#callform').append("<a id='formlink2' class='formlink' style='display: none;'>IMAGE 2</a>");
    $(".formlink").click( function(){
        $('#formlink1').toggle();
        $('#formlink2').toggle();
    });
});

$（文档）.ready（函数（）{
$（'#callform'）。追加（“图像1”）；
$（'#callform'）。追加（“图像2”）；
$（“.formlink”）。单击（函数（）{
$（'#formlink1'）。toggle（）；
$（'#formlink2'）。toggle（）；
});
});

我修改了这个方法，直接切换图像，但这个概念很有效，谢谢Dexter。

$(document).ready(function(){
    $('#callform').append("<a id='formlink1' class='formlink'>IMAGE 1</a>");
    $('#callform').append("<a id='formlink2' class='formlink' style='display: none;'>IMAGE 2</a>");
    $(".formlink").click( function(){
        $('#formlink1').toggle();
        $('#formlink2').toggle();
    });
});