Fatal编程技术网
  • javascript/
  • Javascript 使用不同的数据属性值多次嵌入同一web小部件

Javascript 使用不同的数据属性值多次嵌入同一web小部件

javascript jquery

Javascript 使用不同的数据属性值多次嵌入同一web小部件,javascript,jquery,Javascript,Jquery,我想创建一个web小部件，它可以在同一页面上多次嵌入，但具有不同的数据属性值，以便根据数据属性值显示不同的数据 例如，我想多次嵌入mywidget.js文件，如下所示： <body> <div> <script src="script/mywidget.js" data-sport="soccer" id="widget-soccer"> </script> </div> &l

我想创建一个web小部件，它可以在同一页面上多次嵌入，但具有不同的数据属性值，以便根据数据属性值显示不同的数据

例如，我想多次嵌入mywidget.js文件，如下所示：

<body>
    <div>
        <script src="script/mywidget.js" data-sport="soccer" id="widget-soccer">
        </script>
    </div> 

    <div>
        <script src="script/mywidget.js" data-sport="tennis" id="widget-tennis">
        </script>
    </div> 
</body>
我的问题是，在mywidget.js的代码中，如何确定正确的脚本标记引用并读取其数据属性，以便使用该值从web服务获取相应的数据。我只使用jquery和javascript

我希望这个小部件也能嵌入到其他用户的网站上，所以他们所做的就是只使用脚本标签嵌入，并传入所需的数据属性值，而不在他们网站上需要的任何地方添加任何额外内容。

我想你不能。我知道这不太好，但我会尝试：

<div><script>sport = "soccer";</script><script src="script/mywidget.js"  id="widget-soccer"></script></div> 

<div><script>sport = "tennis";</script><script src="script/mywidget.js" id="widget-tennis"></script></div>
并在mywidget.js中使用sport

另一种方法可能是myscript.js实际上是一个动态页面，比如说使用php，然后可以使用src=script/mywidget.js？sport=swiming，在php中可以打印：

sport = "<?php echo addcslashes($_GET['sport'], '"'); ?>";
但更好的是：

<script src="script/mywidget.js"></script>    
<div><script>showWidget("soccer");</script></div>
<div><script>showWidget("basketball");</script></div>
我认为您可以使用jQuery来查找src=script/mywidget.js或其他类型的所有脚本标记

$('script[src="script/mywidget.js"]')
然后，您将拥有一组脚本标记，可以使用jQuery的.data方法循环访问数据属性。

这不是一个很好的方法，因为它非常不灵活。但是，如果标记没有延迟，则在执行时停止对文档的解析，那么当前脚本标记将是DOM中的最后一个；因此，您可以使用以下方法在脚本中获取当前运动：

var sport = $('script').last().data('sport');
但是，最好在外部JavaScript文件中定义一个函数，然后在需要实例化小部件编辑时调用它：如Lee Taylor的回答所示。

为什么不执行以下操作：

<head>
    <script src="script/mywidget.js"></script>
</head>

<body>
    <div><script>createMyWidget({sport : "soccer"} );</div> 

    <div><script>createMyWidget({sport : "tennis"} );</div> 
</body>