2

私のウェブサイトの私のコードはここでは機能しません。フィドルへのリンクです：

ヘルプが必要な人のために JSFiddle が更新されていることに注意してください...

jsfiddle

画像をクリックすると変更されますが、元に戻りません... 39 行目で画像を追加します。

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

1 に答える 1

2

クリック イベントが存在する前に要素にバインドしています。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();

    });
于 2013-04-09T01:43:55.377 に答える