带有 Javascript 的图像按钮答案

【问题标题】：Image Button with Java Script带有 Javascript 的图像按钮
【发布时间】：2013-08-02 21:27:11
【问题描述】：

好的，我正在尝试创建一个 script.js 来制作图像按钮，但代码不想运行！你能告诉我有什么问题吗？

HTML:

    <div class="baixo-tudo">
        <div class="botao">
            <img src="./images/bto-net-out.png" />
            <span class="src1">http://www.midnightbsd.org/art/logo/MidnightBSDLogo32x32.png</span>
            <span class="src2">http://www.parmaja.com/projects/firebirdlogo/logo-32x32.png</span>
        </div>
        <div class="botao">
            <img src="./images/bto-net-out.png" />
            <span class="src1">./images/bto-visual-out.png</span>
            <span class="src2">./images/bto-visual-over.png</span>
        </div>
        <div class="botao">
            <img src="./images/bto-net-out.png" />
            <span class="src1">./images/bto-sql-out.png</span>
            <span class="src2">./images/bto-sql-over.png</span>
        </div>
    </div>

</div>

Script.js：

 $('.baixo-tudo').find('.botao').each(function (i) {

    var imge = $('img');
    var t = $('.botao'),
        src1 = t.find('.src1').text(),
        src2 = t.find('.src2').text();

    imge.mouseover(function () {
        t.attr('src', src1);
    }, function () {
        t.attr('src', src2);
    });
});

看：http://jsfiddle.net/NnUe6/

许多神经元发射来创建这个 =/

现在看，图像消失了：http://jsfiddle.net/NnUe6/4/

【问题讨论】：

包括jQuery，我还添加了日志语句：jsfiddle.net/NnUe6/1
@ISFO 没有服务器代码。为什么问题被标记到 ASP.Net？
因为它在visual web studio到aspx
查看我的帖子的编辑。

标签： jquery asp.net image button

【解决方案1】：

您可以尝试将其放入 document.ready 调用中。正如 Samuel Reid 所指出的，悬停功能是您所需要的。像这样：

$(document).ready(function () {
    $('.baixo-tudo').find('.botao').each(function (i) {

        var imge = $('img');
        var t = $('.botao'),
            src1 = t.find('.src1').text(),
            src2 = t.find('.src2').text();

        imge.hover(function () {
            t.attr('src', src1);
        }, function () {
            t.attr('src', src2);
        });
    });
});

编辑，以你的小提琴为基础。

我猜this是你想要的？

$('.baixo-tudo').find('.botao').each(function (i) {

    var t = $(this),
        imge = t.children("img"),
        src1 = t.children('.src1').text(),
        src2 = t.children('.src2').text();

    imge.mouseover(function () {
        imge.attr('src', src1);
    });

    imge.mouseout(function () {
        imge.attr('src', src2);
    });
});

甚至shorter。

$('.baixo-tudo').find('.botao').each(function (i) {

    var t = $(this),
        imge = t.children("img"),
        src1 = t.children('.src1').text(),
        src2 = t.children('.src2').text();

    imge.hover(function () {
        imge.attr('src', src1);
    }, function () {
        imge.attr('src', src2);
    });
});

【讨论】：

【解决方案2】：

这里有你需要的

$('.baixo-tudo').find('.botao').each(function (i) {


    var imge = $(this).find('img');
    var src1 = $(this).find('span.src1').text();

    imge.hover(function(){
        $(this).attr('src',src1);

    });

});

根据您的需要进行调整。我还编辑了你的小提琴。它可以按你的需要工作。

http://jsfiddle.net/NnUe6/7/

【讨论】：

【解决方案3】：

尝试将您的 mouseover 函数改为 hover。

【讨论】：