1

クリック時に画像を入れ替えるつもりはありませんが、下の画像から上にクリックすると、下の画像に移動しません... m 何らかのエラーが発生します- x.attr("src") は未定義です

 $(document).ready(function () {
     $('#sortdivlink').click(function () {

        var x = $("img[src$='../Images/Sort_down.png'][name='stCodeDSC']");

        if (x.attr("SRC") == "../Images/Sort_down.png") {
            x.attr('src', x.attr('src').replace("../Images/Sort_down.png", "../Images/sort_up.png"));
        }
        else {
             x.attr('src',  x.attr('src').replace("../Images/sort_up.png", "../Images/Sort_down.png"));
        }
    });
});
4

3 に答える 3

8

xこれは、 null を返す可能性が高い、割り当てに使用しているセレクターによるものだと思います。Id または CSS クラスを画像に追加してから、セレクターを次のように単純化することを検討します。

var x = $('img.sortDirectionImage');

あるいは、要素に 1 つの画像しかないことがわかっている場合は、その要素のコンテキスト内でsortdivlink単純に要素を検索できます。次に例を示します。img

// within the click function scope
var x = $('img', this);

編集

さらに、より認識しやすい変数名を使用することをお勧めします。あなたは何が何であるかを知っているかもしれませんxが、あなたのコードを読みに来た次の人は知らないかもしれません。

于 2012-04-10T14:24:50.577 に答える
2

<div>a と次元の css クラスで aを使用しbackground-image、$(div).toggleClass("new-image") を使用して更新されたbackground-image

これにより、コードが大幅に簡素化されます。

[編集]

 <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <style>
    .first-image
    {
       background-image: url( 'http://www.google.com/press/zeitgeist2001/google_logo.gif' );
       width:218px;
       height:90px;
       background-position:center;
       background-repeat:no-repeat;
    }

    .second-image
    {
       background-image: url( 'http://www.google.com/doodle4google/2008/images/regional_doodles/CO-80106-16a267f8-3.jpg' );
       width:350px;
       height:224px;
       background-position:center;
       background-repeat:no-repeat;
    }
    </style>

    <script>
    $(document).ready(function( ) 
    { 
        $("#target-div").click( function( ) 
        {  
           $("#target-div").toggleClass("second-image");
        });
    });
    </script>
    </head>
    <body>
    <div id="target-div" class="first-image"></div>
    </body>
    </html>
于 2012-04-10T14:28:35.853 に答える
1

私がずっと前に書いた私のスクリプトを見てください（jQueryなしで）：

function changeImg(element) {
        var img = document.getElementById(element);
        if (img.src == "../images/expand.png") {
            // collapse
            img.src = "../images/collapse.png";
        }
        else {
            // expand
            img.src = "../images/expand.png";
        }
    }

通常の HTML マークアップ:

<span onclick="changeImg('ansprechpartner');return false;">...</span>

多分それはあなたのために働くでしょう...

于 2012-04-10T14:37:48.263 に答える