Question

我想在点击图片时显示不同的图片。演示是here。单击图像时，图像应更改为指向上方的箭头而不是指向下方。我该怎么做？

这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
    <div id="flip"><img src="http://i.imgur.com/YCf5zYt.png"></div>
    <div id="panel" style="display: none;"><p><i><strong>CONTENT</strong></i></p>
    </div>
</td>

JS

var toggled = false;
$("img").click(function () {
    if (!toggled) {
        $(this).css("", "url(http://i.imgur.com/YCf5zYt.png)");
        toggled = true;
    } else {
        $(this).css("", "url(http://i.imgur.com/V4fKMWS.png)");
        toggled = false;
    }

    $("p").slideToggle();
})
$(document).ready(function () {
    $("#flip").click(function () {
        $("#panel").slideToggle("slow");
    });
});

Answer 1

以下是toggleClass()和attr()功能的另一种解决方案：

See this fiddle

$(document).ready(function () {
    $("img").click(function () {
        $(this).toggleClass('active');
        if($(this).hasClass('active')){          
          $(this).attr("src","http://i.imgur.com/V4fKMWS.png");
        } else {    
          $(this).attr("src","http://i.imgur.com/YCf5zYt.png");
        }   
        $("#panel").slideToggle();
    });
});

Answer 2

代码有几个问题：

首先，您必须在文档就绪回调中附加所有事件处理程序。就目前而言，可能没有附加事件处理程序，因为当您尝试附加处理程序时，可能尚未加载图像标记。

您还必须修改图片的src属性，而不是css的url样式：

$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");

Answer 3

你可以改变attribue src。

 if (!toggled) {
            $(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
            toggled = true;
        } else {
            $(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
            toggled = false;
        }

参考链接：https://jsfiddle.net/sj7o9x58/2/

Answer 4

您的代码出现错误尝试此

function paging(div_id, module, page_value)
{           
    var active_customer_list = $("#active_customer_list").val();
    $("#"+div_id).html(loader);   
    var data = $('#search_form').serializeArray();    
    $.ajax({
           type: "POST",
           url: "my_page.php",
           data: new FormData($('#search_form')[0]).append ({ 'type' , 'paging'}),
        success: function(msg)
           {
                msg = msg.replace(/^[\s]+/g,"");
                $("#"+div_id).html(msg);                
           }
         });
    return false;       
}

Answer 5

尝试在$(document).ready();中编写所有代码并且您犯了一个大错误。您应该.slideToggle()使用$("#panel")。这是更简单的方法（没有任何变量）：

    $(document).ready(function(){
    $("#flip").click(function(){
        if($("#panel").css("display") === "none"){
            $("#panel").slideToggle().css("display", "block");
            $("img").attr("src", "http://i.imgur.com/V4fKMWS.png");
    }   else if($("#panel").css("display") === "block"){
            $("#panel").slideToggle();
            $("img").attr("src", "http://i.imgur.com/YCf5zYt.png");
    }
    });
});

演示是here

Answer 6

$(document).ready(function () {
    var toggled = true;

    $("img").on('click',function () {
        if (!toggled) {
            $(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
            toggled = true;
        } else {
            $(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
            toggled = false;
        }

        $("#panel").slideToggle("slow");
    });
});

更新的小提琴：https://jsfiddle.net/sj7o9x58/3/

我不知道这是否是你想要的图像行为，如果它是oposite只是将切换初始化改为 false ，而默认情况下是src（html）上的图像。

更改图像onclick

6 个答案: