如何使用JavaScript或檢索從自己SVG文件名或路徑的jQuery

Question

請是有可能的方式，我可以直接從文件本身，例如得到一個SVG文件的文件名，我有這樣的文件夾和文件

+mainFolder/  <!--Main Folder--> 
+svgImgs/   <!--SVG image Folder--> 
    +image.svg  <!--SVG image--> 
+index.php  <!--index page of Main Folder--> 

然後在我的索引頁中，我有這個ajax()調用，它檢索並附加image.svg文件。

$.get('svgImgs/image.svg', null, function(data){ 
    var svgNode = $('svg', data); 
    var docNode = document.adoptNode(svgNode[0]); 
    $('div').append(docNode); 
}, 'xml'); 

現在的問題是，我想，因爲我對他們有多個觸發事件onclick爲svg文件。我想通過SVG文件名或SVG路徑作爲參數

<svg> 
    <script> 
     $('svg').on('load', function(){ 
      fileName = //get the file name or file path 
      $(this).attr('onclick', 'myFunction('+fileName+')'); 
     }) 
    </script> 
</svg> 

所以我可以在我的索引文件

function myFunction(svg){ 
    //functions here 
} 

運行myFunction()請我如何能做到這一點任何更好的建議？

Answer 1

你可以用另一個函數的調用$.get()和傳遞文件名作爲參數，那麼這將讓你輕鬆地爲多個SVG文件做到這一點...

function getSvg(filename) { 
    $.get(filename, null, function(data) { 
     var svgNode = $('svg', data); 

     svgNode.on("click", function() { 
      myFunction(filename); 
     }); 

     var docNode = document.adoptNode(svgNode[0]); 
     $('div').append(docNode); 
    }, 'xml'); 
} 

getSvg("svgImgs/image.svg"); 
// get other svg files... 

Answer 2

從什麼@Archer寫，這是一個簡短而快捷的方法。相反，在一個函數的嵌套調用$.get()的，你可以做到這一點

$.get(filename, null, function(data) { 
    var svgNode = $('svg', data); 

    svgNode.on("click", function() { 
     myFunction(filename); 
    }); 

    var docNode = document.adoptNode(svgNode[0]); 
    $('div').append(docNode); 
}, 'xml'); 

然後在myFunction()你剛纔得到的值傳遞

function myFunction(svg){ 
    console.log(svg); 
}