1

我不想在点击时交换图像，bt 如果我从下图点击到上图，但如果我点击该图像，它又不会出现在下图...我得到一些错误- 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');

或者，如果您知道该sortdivlink元素将只有一个图像，您可以简单地在该img元素的上下文中搜索一个元素，例如：

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

编辑

此外，我建议使用更易识别的变量名；您可能知道是什么x，但下一个阅读您的代码的人可能不知道。

于 2012-04-10T14:24:50.577 回答
2

您可以将 a<div>与带有 abackground-image和尺寸的 css 类一起使用，并使用 $(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 回答