如何指定只应用基于div的jquery效果参数？

发布于 2024-08-14 13:54:16 字数 432 浏览 7 评论 0原文

好吧，这就是我想做的。

我想将一些效果应用于几个不同的 div 容器。假设我有一个幻灯片效果和一个 fadeTo 效果。与在 JS 代码中指定 div 类/id 不同，我更愿意通过为 div 提供自定义标签或附加 id/类来应用效果。我总是想在实际的div上指定效果的参数。

例如。

<div id="cssDesign SlideEffect" [Speed, Duration parameters somewhere]></div>

或

<div Customtag="SlideEffect" id="cssDesign" [Speed, Duration parameters somewhere]></div>

有道理吗？

原文

Ok here is what I am trying to do.

I have a few effects I want to apply to several different div containers. Lets say I have a slide effect and a fadeTo effect. Rather then specifying what the div class/id is in the JS code, I would prefer to just be able to apply the effect by just giving the div a custom tag or an additional id/class. I always want to specify the parameters of the effect on the actual div.

For instance.

<div id="cssDesign SlideEffect" [Speed, Duration parameters somewhere]></div>

<div Customtag="SlideEffect" id="cssDesign" [Speed, Duration parameters somewhere]></div>

Make sense?

分享到QQ

分享到微博

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

发布评论

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

ま柒月 2024-08-21 13:54:16

如果你想让你的页面符合XHTML标准，你可以使用一些现有但未使用的属性，例如rel来存储数据。这在语义上不正确，但是嘿，它是有效的。

<div rel="slide,500"></div>

还有 jQuery：

$('div[rel^=slide]').each(function() {
    var data = $(this).attr('rel').split(',');
    var speed = data[1];
});

等等。如果不需要其他任何用途，您也可以使用 id 来代替 rel（在大多数情况下，您可以使用 id 来替代）代码>与类）。

If you want to keep your pages conforming to the XHTML standard, you can use some existing but not used attribute, such as rel to store the data. It's not semantically correct but hey, it validates.

<div rel="slide,500"></div>

And jQuery:

$('div[rel^=slide]').each(function() {
    var data = $(this).attr('rel').split(',');
    var speed = data[1];
});

And so on. Instead of rel, you can also use id if you don't need it for anything else (in most cases, you can substitute the use of id with class).

回复收藏 0 原文

浮世清欢 2024-08-21 13:54:16

它不是有效的 XHTML，但您始终可以向 html 标记添加非标准属性。

<div id="cssDesign" SlideEffect="Speed,Duration"></div>

然后您可以根据属性编写选择器。

$("div[SlideEffect]").mouseover(function() {
    var speed = parseInt($(this).attr("SlideEffect").split(',')[0]);
    var duration = parseInt($(this).attr("SlideEffect").split(',')[1]);
});

（在此处了解有关属性选择器的更多信息。）

It's not valid XHTML, but you can always add non-standard attributes to html tags.

<div id="cssDesign" SlideEffect="Speed,Duration"></div>

Then you can write your selectors based on the attribute.

$("div[SlideEffect]").mouseover(function() {
    var speed = parseInt($(this).attr("SlideEffect").split(',')[0]);
    var duration = parseInt($(this).attr("SlideEffect").split(',')[1]);
});

(Read more about attribute selectors here.)

回复收藏 0 原文

飘然心甜 2024-08-21 13:54:16

通常不建议使用自定义标签或属性（HTML 文档不会通过验证，这可能会影响搜索引擎的索引）。在类似的情况下，我使用了正确的 html 标签之一，例如 class 或 id 并在那里放置可解析信息：

<div id="mydiv_slide_500">...</div>

然后您必须提取属性值，并使用 split('_') 解析它。它比使用自定义标签更复杂，但您可以获得有效的 HTML。

Using custom tags or attributes is generally not recomended (the HTML document will not pass the validation, that could affect indexing by search engines). In similar situation i used one of the proper html tags, like class or id and place parsable info there:

<div id="mydiv_slide_500">...</div>

Then you have to extract the attribute value, and parse it with split('_'). It is a more complicated than using custom tags, but you get the valid HTML.

回复收藏 0 原文

只等公子 2024-08-21 13:54:16

请原谅我完整的 JS n00bish 在这里..

我不知道如何将其插入这里：

$(document).ready(function() {

  $('#slidemarginleft button').click(function() {
    $(this).animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });
  });
});

Forgive my complete JS n00bish here..

I can't figure out how to plug that in here:

$(document).ready(function() {

  $('#slidemarginleft button').click(function() {
    $(this).animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });
  });
});

回复收藏 0 原文

~没有更多了~