2

我正在用 Fabricjs 制作一个网站。一个 div 将成为画布，另一个将有很多图像（数百个）。我希望能够单击图像，以便它们在画布中弹出。我的问题是；单击时如何获取图像的 src，以便 img 节点进入画布节点。我应该为每个图像制作一个 addEventl 数组吗？

（用javascript编写）

一如既往地感谢:)

<!doctype html>
<html lang="en";>
<head>
    <meta charset="utf-8" />
    <title>CustomCase</title>
    <link rel="stylesheet" href="HeaderFooter.css">
    <link rel="stylesheet" href="SkapaDesign.css">
    <script src="Jquery.js"></script>
    <script src="Fabric.js"></script>
    <script src="Canvas.js"></script>
</head>
<body>  
    <div id="Wrapper">  
        <header id="Header">
            <a href="http://www.inet.se/" id="HeaderLink1">Om Oss</a>
            <a href="F%C3%A4rdigaDesigner.html" id="HeaderLink2">Välj Design</a>
            <a href="Framsida.html" id="LogoLink"><img id="Logo" src=LogotypHemsida.png></a>
            <a href="SkapaDesign.html" id="HeaderLink3">Skapa Design</a>
            <a href="http://sv.reddit.com/" id="HeaderLink4">Hjälp</a>
        </header>

        <section id="Body">
            <img id="UpperShadow" src=NeråtSkugga.png>

            <div id="LeftColumn">
                <div id="TextMode">
                </div>
                <div id="CanvasContainer">
                    <canvas id="Canvas" width="270px" height="519px"></canvas>
                </div>
                <div id="LayerMode">
                </div>

                <div id="IPhoneMode">
                </div>
            </div>

            <div id="RightColumn">
                <div id="TextureMode">
                </div>

                <div id="TextureFilter">
                </div>

                <div id="TextureView">
                    <div id="TextureViewInside">
                        <div id="images">
                            <img src="FärgadePapper.png">
                            <img src="Hajar.png">
                            <img src="Labyrint.png">
                            <img src="Martini.png">
                            <img src="FärgadePapper.png">
                            <img src="Hajar.png">
                            <img src="Labyrint.png">
                            <img src="Martini.png">
                            <img src="FärgadePapper.png">
                            <img src="Hajar.png">
                            <img src="Labyrint.png">
                            <img src="Martini.png">
                            <img src="FärgadePapper.png">
                        </div>
                    </div>
                </div>  
            </div>

            <img id="LowerShadow" src=UppåtSkugga.png>
        </section>

        <footer id="Footer">
            <div id="FooterSpace"></div>

            <div id="FooterColumnLeft">
                <a href="">Välj Design</a>
                <a href="">Skapa Design</a>
                <a href="">Om Oss</a>
                <a href="">Hjälp</a>
            </div>  

            <div id="FooterDevider">
            </div>

            <div id="FooterColumnRight">
                <div id="Facebook">
                    <img id="FacebookLogo" src=FacebookLogo.png>
                    <a href="">Gilla oss på Facebook</a>
                </div>
                <div id="Twitter">
                    <img id="TwitterLogo" src=TwitterLogo.png>
                    <a href="">Följ oss på Twitter</a>
                </div>
            </div>

            <div id="FooterSpace"></div>
            <div id="BottomColor"></div>
        </footer>   
    </div>
</body>
</html>
4

3 回答 3

3

您不必为每个 img 声明 onclick。

试试这个：http: //jsfiddle.net/cEh93/

$("#images img").click(function() {
    var getsource = $(this).attr("src");
    alert(getsource);
});
于 2013-11-12T19:18:20.140 回答
1

您不需要onclick在每个图像上，您可以将 jQuery 事件处理程序附加到所有图像并获取它们的src属性（这将在src单击图像时将图像输出到控制台）：

jQuery(document).ready(function()
    jQuery("#images img").on( "click", function() {
        console.log( jQuery( this ).attr('src') );
    });
}); // ready
于 2013-11-12T19:06:10.940 回答
0

您可以为上部 DIV 设置仅检索 SRC 附加事件（使用 JS），如下所示：

       <div id="images" onclick="getSelectedImageURL(event);">
                        <input type="image"   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                        <img   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                        <img   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                        <img   src="FärgadePapper.png">
                        <img   src="Hajar.png">
                        <img   src="Labyrint.png">
                        <img   src="Martini.png">
                    </div>

要在点击事件上获取当前选定的图像 SRC...

function getSelectedImageURL(event){
    if(event.target.localName.toUpperCase() == 'IMG')
        alert(event.target.src);
}
于 2013-11-12T19:26:14.647 回答