jquery - .slideToggle() 上下移动时如何更改图像

Question

我的网站代码在这里不起作用是小提琴的链接：

注意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

您将点击事件绑定到元素之前，它们存在。您可以将 for 循环移到事件绑定语句之上，或者将它们分组到一个函数中，您可以在脚本的其余部分运行后调用该函数。见这个例子：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();

    });