2

私はFabricjsでウェブサイトを作っています。1 つの div がキャンバスになり、別の div には多数の画像 (数百) が含まれます。画像をクリックしてキャンバスにポップアップできるようにしたい。私の質問は; imgノードがキャンバスノードに入るように、クリックしたときに画像のsrcを取得するにはどうすればよいですか。画像ごとに 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

すべての画像に jQuery イベント ハンドラーをアタッチし、その属性onclickを取得できます(これにより、画像がクリックされたときに画像がコンソールに出力されます)。srcsrc

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 (JS を使用) の SRC のみの添付イベントの取得を設定できます。

       <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 に答える