Question

我在锚标签中使用了两张图片。我正在使用jquery切换锚标记的click事件来交换图像。

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

这在第一次工作正常，但是我想在点击另一个图像时在两个图像之间切换。有什么想法吗？

Answer 1

您可以在更改为IMAGE1时设置标记。

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

Answer 2

您的代码旨在在切换完成后附加“IMAGE 2”，而不是其他内容。

您可能需要以下内容：

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

Answer 3

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

$(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();
    });
});

Answer 4

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

Answer 5

这是我切换图片的方式

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

HTH

在图像之间切换

5 个答案: