自定义 Web 部件在一页上多次出现问题

发布于 2024-10-10 20:15:35 字数 981 浏览 3 评论 0原文

我目前正在开发一个 web 部件，它运行一些 jquery，并在其中的某些元素上具有切换功能。我的问题是，这个 webpart 应该在同一个 webpart 页面上使用多次，我发现这给我带来了很多麻烦，因为 javascript 将多次加载到页面上，试图触发相同元素上的功能。

我认为创建几种方法来改变不同的值是很聪明的，但最终我遇到了同样的问题。

所以现在我没有想法了，而且我的 jquery 和 javascript 技能也很有限。因此，任何帮助、示例、指示——任何能让我更接近解决方案的东西，我都会非常感激。

jquery 脚本：

$(document).ready(function (){ 
      $('.togglingDiv').find('dd').hide().end().find('dt').click(function() {
             $(this).next().slideToggle("fast");
      });
});

jquery 正在切换的 HTML：

<dl class="togglingDiv">
    <dt>Lorem ipsum</dt>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    <dt>Lorem ipsum</dt>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    <dt>Lorem ipsum</dt>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
 </dl>

原文

I am currently working on developing a webpart which runs some jquery with a toggling functionality on some of the elements in it. My issue here is that this webpart is meant to be used several times on the same webpartpage, which I have discovered courses me a lot of trouble, as the javascript will be loaded on the page several times trying to trigger functions on the same elements.

I thought it would be clever to create a couple methods to change different values here and there, but in the end I ended having the same issue.

So now I'm out of ideas and my skills with jquery and javascript are limited. So any help, samples, pointers - anything that make me come that much closer to a solution, I will be greatefull for.

The jquery script:

$(document).ready(function (){ 
      $('.togglingDiv').find('dd').hide().end().find('dt').click(function() {
             $(this).next().slideToggle("fast");
      });
});

The HTML the jquery is toggling:

<dl class="togglingDiv">
    <dt>Lorem ipsum</dt>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    <dt>Lorem ipsum</dt>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    <dt>Lorem ipsum</dt>
    <dd>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
 </dl>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紫南 2024-10-17 20:15:35

您可以让 Web 部件使用 ClientScriptManager 加载 javascript。像这样的东西只会包含脚本一次：

ClientScriptManager scriptManager = this.Page.ClientScript;

if (!scriptManager.IsClientScriptIncludeRegistered("scriptName"))
    scriptManager.RegisterClientScriptInclude("scriptName", "scriptUrl");

您还可以使用 .RegisterClientScriptBlock 如果您无法使用外部文件。

You can have your webparts load the javascript with the ClientScriptManager. Something like this will only include the script once:

ClientScriptManager scriptManager = this.Page.ClientScript;

if (!scriptManager.IsClientScriptIncludeRegistered("scriptName"))
    scriptManager.RegisterClientScriptInclude("scriptName", "scriptUrl");

You can also use .RegisterClientScriptBlock if you can't use an external file.

回复收藏 0 原文

染年凉城似染瑾 2024-10-17 20:15:35

在类似的场景中，我曾经将

替换为

。当它具有“runat server”时，Asp.net 会负责为“togglingDiv”的每个实例生成不同的 ID。

然后，将 jQuery 代码放入 ascx 文件中，并使用 ASP.Net 的 <%= .... %> 构造生成它：

$(document).ready(function (){       
 $('#<%=togglingDiv.ClientId%>').find('dd').hide().end().find('dt').click(function()
  {             
  $(this).next().slideToggle("fast");   
  }); 
});

In a similar scenario I used to replace <dl class="togglingDiv"> with <dl id="togglingDiv" runat="server">. When it has "runat server", Asp.net takes care of generating a different ID for each instance of your "togglingDiv".

Then you put the jQuery code in an ascx file and generate it using ASP.Net's <%= .... %> construct:

$(document).ready(function (){       
 $('#<%=togglingDiv.ClientId%>').find('dd').hide().end().find('dt').click(function()
  {             
  $(this).next().slideToggle("fast");   
  }); 
});

回复收藏 0 原文