Question

我正在与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>

Answer 1

您不必为每个img声明onclick。

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

$("#images img").click(function() {
    var getsource = $(this).attr("src");
    alert(getsource);
});

Answer 2

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

jQuery(document).ready(function()
    jQuery("#images img").on( "click", function() {
        console.log( jQuery( this ).attr('src') );
    });
}); // ready

Answer 3

您可以为上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);
}

单击Fabric.js画布时如何获取图像的src？

3 个答案: