jquery - クリックして後方にjquery画像を変更

Question

単純なことで申し訳ありませんが、画像の変更はこれでは機能しません。私は多くのオプションを試しましたが、問題が見えないかもしれません。

 $('#accordion li.first').click(function() {
                    if ($(this).children('img').attr('src','img/drop.png')) {
                        $(this).children('img').attr('src','img/drop90.png');
                    }
                    if ($(this).children('img').attr('src','img/drop90.png')) {
                        $(this).children('img').attr('src','img/drop.png');
                    }
                 });

Answer 1

あなたはおそらくしたいです

if ($(this).children('img').attr('src')=='img/drop.png') {

それ以外の

if ($(this).children('img').attr('src','img/drop.png')) {

Answer 2

別のことをしたい場合は、次の手順に従ってください。

1. 画像にクラスを追加drop&drop90
2. drop& CSSdrop90クラスで、適用 background-image: url(img/drop.png);してbackground-image: url(img/drop90.png);
3. 上記の Jquery とサンプル CSS を使用して、関数を使用して 2 つのクラスを切り替えます。toggleClass()

JQuery:

$('#accordion li.first').click(function() {
    $(this).children('img').toggleClass("drop drop90");
});​

CSS:

.​drop​ {
    background-image: url(img/drop.png); 
    height: 100px; 
    width: 200px;
}
.drop90 {
    background-image: url(img/drop90.png); 
    height: 100px; 
    width: 200px;
}​

Answer 3

if ($(this).find('img').attr('src') === 'img/drop.png') は常にtrueと評価されます.. 値を割り当てて比較していないためです

代わりにこれを試してください

 $('#accordion li.first').click(function() {
       if ($(this).children('img').attr('src') === 'img/drop.png') {
          $(this).children('img').attr('src','img/drop90.png');
        }
        if ($(this).children('img').attr('src') === 'img/drop90.png') {
               $(this).children('img').attr('src','img/drop.png');
        }
 });

Answer 4

$('#accordion li.first').click(function() {
    var $this = $(this), $img = $this.children('img'), src = $img.attr('src');

    switch (src) {
        case 'img/drop.png':
            $img.attr('src', 'img/drop90.png');
        break;

        case 'img/drop90.png':
            $img.attr('src', 'img/drop.png');
        break;
    }
});