2

リストされた子の親がクリックされたときに、img の src を変更したいと思います。スライドアップとスライドダウンに問題があったため、StackOverflow で見つけた作業中のコードを使用しています。

一番上の各項目 (親) の左側には、右を指す矢印アイコンがあります。アイコンをクリックすると、このイメージが下向きの矢印に変わります。

onClickで画像を変更できますが、画像をクリックしない限り、画像は元に戻りません。したがって、スライドアップとスライドダウンの機能に変更を加える必要があると思います。閉じるリンクをクリックした場合、または新しい親をクリックした場合にも、画像は元に戻るはずです。

「一度に表示できるリストは 1 つだけ」機能がなくても生活できます。これにより、新しい親をクリックしたときに画像も変更する必要がなくなります。

このフィドルでは、私がやろうとしていたことをリストの最初の親にのみ適用しました: http://jsfiddle.net/9aa5n/51/

HTML:

    <li><a href="javascript:void(0);" class="edit_button edit_this" id="1"><img src="arrowright.png"></a></li>  
<li class="show_hide" id="1C">
<p>lkjlkjasdfasdf</p>
<a href="javascript:void(0);"  id="1Close" class="close cancel_btn">Close</a>
</li>

<li><a href="javascript:void(0);" class="edit_button edit_this" id="2">Edit</a></li>
<li class="show_hide" id="2C">
<p>lkjlkjasdfasdf</p>
<a href="javascript:void(0);"  id="2Close" class="close cancel_btn">Close</a>
</li>

<li><a href="javascript:void(0);" class="edit_button edit_this" id="3">Edit</a></li>
<li class="show_hide" id="3C">
<p>lkjlkjasdfasdf</p>
<a href="javascript:void(0);"  id="3Close" class="close cancel_btn">Close</a>
</li>

jQuery/Javascript:

    $(document).ready(function() {
        $('.show_hide').slideUp(0);
        $('.edit_this').click(function() {
            $('.show_hide').slideUp(300);
            var takeID = $(this).attr('id');
            $('#' + takeID + 'C').slideDown(300);


        });
        $('.close').click(function() {
            var takeID = $(this).attr('id').replace('Close', '');
            $('#' + takeID + 'C').slideUp(300);
        });
    });

$('#img-tag').on({
    'click': function() {
                     var src = ($(this).attr('src') === 'arrowright.png')
            ? 'arrowdown.png'
            : 'arrowright.png';
         $(this).attr('src', src);
    }
});
4

1 に答える 1

0

あなたの jsfiddle を更新しました: http://jsfiddle.net/9aa5n/53/

画像への絶対パスを提供していないため、ネットからいくつか追加しました。

クリック イベントを削除し、これに置き換えました。問題は、jQuery で要素を参照する方法にあったと思います。

$(".edit_button").click(function() {
    var img = $(this).find("img").first();
    console.log(img.attr("src"));
    if (img.attr("src") === 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png') {
            img.attr("src", 'http://png-3.findicons.com/files/icons/2315/default_icon/256/arrow_down.png');
            console.log(img.attr("src"));
    } else {
        img.attr("src", 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png');
         console.log(img.attr("src"));
    }
});

これにより、UI の磨き上げが完了します。つまり、要素をすべて閉じて.edit_buttonから、要素のみを開き$(this).find("img").first()ます...

于 2013-07-18T16:48:11.453 に答える