jquery - 如何在 .slideToggle() 上下移动时使图像发生变化

Question

我的网站代码在这里不起作用，这是 fiddle 的链接:

注意 JSFiddle 已为任何需要帮助的人更新...

jsfiddle

如果我单击图像，它会发生变化，但不会变回来...... 第 39 行添加图像:

$("#sel" + i).prepend("<img id='ico" + i + "' src='https://dl.dropbox.com/s/5z6muxkoq2ort9l/arrowside.png' width='24' height='24' /> ");

Answer 1

您在元素存在之前将单击事件绑定(bind)到元素。您可以将 for 循环移至事件绑定(bind)语句上方，或者将它们分组到一个函数中，您可以在脚本的其余部分运行后调用该函数。请参阅此示例:http://jsfiddle.net/TPcHp/

function bindClicks()
{
    $("#ico1").click(function()
    {
       //Rest of your code here
    }
    //More click binding fun
}

for (var i = 1; i < recipes.length + 1; i++)
    {
        $("#sel" + i).attr("data-hidden", i);
        $("#sel" + i).prepend("<img id='ico" + i + "' src='https://dl.dropbox.com/s/5z6muxkoq2ort9l/arrowside.png' width='24' height='24' /> ");
        $("#ico" + i).attr("data-hidden", i);            
    }

bindClicks();

您的 jsfiddle 第 12 行也有一个错误，导致 javascript 无法运行。注意行尾的撇号

$('.info:not(#res' + hiddenid + ')').slideUp();'

要解决切换问题，请尝试在调用 SlideToggle 之前测试该元素是否隐藏(因为这将是中间过渡):http://jsfiddle.net/ypAC9/

$("#ico1").click(function()
    {        
        var hiddenid = $(this).data('hidden');
        if ($("#res" + hiddenid).is(":visible"))
        {
            $(this).attr("src", "https://dl.dropbox.com/s/5z6muxkoq2ort9l/arrowside.png");
        }
        else
        {
            $(this).attr("src", "https://dl.dropbox.com/s/hf4i6ww9xvemlc4/arrowdown.png");
        }

        $('#res' + hiddenid).slideToggle();
        $('.info:not(#res' + hiddenid + ')').slideUp();

    });