Fatal编程技术网
  • csharp/
  • C# 如何在单击时交换图像？

C# 如何在单击时交换图像？

c# javascript jquery asp.net

C# 如何在单击时交换图像？,c#,javascript,jquery,asp.net,C#,Javascript,Jquery,Asp.net,我想在点击时交换图片，这里是bt，如果我从下一个图片点击到上一个，但是如果我点击那个图片，它不会出现在下一个图片上。。。 出现一些错误-x.attr（“src”）未定义 $(document).ready(function () { $('#sortdivlink').click(function () { var x = $("img[src$='../Images/Sort_down.png'][name='stCodeDSC']"); if

我想在点击时交换图片，这里是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"));
        }
    });
});
我认为这是由于您用于分配
x
的选择器导致的，该选择器很可能返回null。我可能会考虑将ID或CSS类添加到图像中，然后将选择器简化为这样的：

var x = $('img.sortDirectionImage');
或者，如果您知道
sortdivlink
元素只有一个图像，您可以在该元素的上下文中搜索
img
元素，例如：

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

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

我想这是由于您用于分配
x
的选择器，它可能返回null。我可能会考虑将ID或CSS类添加到图像中，然后将选择器简化为这样的：

var x = $('img.sortDirectionImage');
或者，如果您知道
sortdivlink
元素只有一个图像，您可以在该元素的上下文中搜索
img
元素，例如：

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

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

您可以将
与带有
背景图像和维度的css类一起使用，并使用$（div）。toggleClass（“新图像”）来使用更新的
背景图像

这将大大简化您的代码

[编辑]


 <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>




.第一张图片
{
背景图像：url（'http://www.google.com/press/zeitgeist2001/google_logo.gif' );
宽度：218px；
高度：90px；
背景位置：中心；
背景重复：无重复；
}
.第二幅图像
{
背景图像：url（'http://www.google.com/doodle4google/2008/images/regional_doodles/CO-80106-16a267f8-3.jpg' );
宽度：350px；
高度：224px；
背景位置：中心；
背景重复：无重复；
}
$（文档）.ready（函数（）
{ 
$（“#目标div”）。单击（函数（）
{  
$（“#目标div”）.toggleClass（“第二个图像”）；
});
});

您可以将
与带有
背景图像和维度的css类一起使用，并使用$（div）.toggleClass（“新图像”）来使用更新的
背景图像

这将大大简化您的代码

[编辑]


 <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>




.第一张图片
{
背景图像：url（'http://www.google.com/press/zeitgeist2001/google_logo.gif' );
宽度：218px；
高度：90px；
背景位置：中心；
背景重复：无重复；
}
.第二幅图像
{
背景图像：url（'http://www.google.com/doodle4google/2008/images/regional_doodles/CO-80106-16a267f8-3.jpg' );
宽度：350px；
高度：224px；
背景位置：中心；
背景重复：无重复；
}
$（文档）.ready（函数（）
{ 
$（“#目标div”）。单击（函数（）
{  
$（“#目标div”）.toggleClass（“第二个图像”）；
});
});

看看我很久以前写的脚本（没有任何jQuery）：

普通HTML标记：


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



。。。



也许它会对你有用
 看看我很久以前写的脚本（没有jQuery）：

普通HTML标记：


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



。。。



也许它会对你有用
 请给我看一些标记好吗？选择器中的$在做什么？“img[src$=”../Images/Sort_down.png'][name='stCodeDSC']@Timmerz其“属性以”选择器结束：请向上投票正确的答案您可以显示一些标记吗？选择器中的$在做什么？”img[src$=”../Images/Sort_down.png'][name='stCodeDSC']@Timmerz it’attribute ends with’selector:Please up vote correct answer这也将解决通过其src查找图像，然后更改src，因此不再查找图像的问题。这也将解决通过其src查找图像，然后更改src的问题，因此再也找不到了。你有这个的样本吗//你有这个的样本吗//