【问题标题】:Use Class Instead of ID (Get element by CLASS not ID)使用类而不是 ID(通过 CLASS 而不是 ID 获取元素)
【发布时间】:2012-08-06 20:07:10
【问题描述】:

我正在使用原型工具提示,它使用 ID 作为元素。我在页面中的工具提示更多,因此它不允许我在页面中使用相同的 ID 超过一次。有没有办法使用 CLASS 作为元素而不是 ID?这是我所拥有的。

<div style="margin-right: 2px" id="tooltip_bio" class="">Learn More</div>
        <script type="text/javascript" language="javascript">
            new Tip('tooltip_bio', "Tooltip Content", {
                title: "Bio",
                closeButton: true,
                showOn: 'click',
                hideOn: { element: 'closeButton', event: 'click'},
                stem: 'bottomMiddle',
                hook: { target: 'topMiddle', tip: 'bottomMiddle' },
                offset: { x: 0, y: -2 },
                width: '300px'
            });
       </script>

【问题讨论】:

  • 这个原型的源代码需要调整。但是如果没有看到确切的源代码,就不可能告诉你怎么做。
  • 您是否尝试过直接传递元素引用而不是仅传递元素的 id 字符串?很多图书馆都允许这样做。一般来说,id 应该是唯一的 - 如果您在一个文档中有多个具有相同 id 的元素,您应该考虑纠正它。

标签: javascript prototypejs element prototype


【解决方案1】:

我对@9​​87654321@不太熟悉,但如果它需要一个ID,只需将你的ID放在一个数组中,然后迭代。

;["id_1", "id_2", "id_3"].each(function(id, i) {

    new Tip(id, "Tooltip Content", {
        title: "Bio",
        closeButton: true,
        showOn: 'click',
        hideOn: { element: 'closeButton', event: 'click'},
        stem: 'bottomMiddle',
        hook: { target: 'topMiddle', tip: 'bottomMiddle' },
        offset: { x: 0, y: -2 },
        width: '300px'
    });

});

【讨论】:

    【解决方案2】:

    从原型文档中你可以做这样的事情。

    document.observe('dom:loaded', function() {
      $$('a[rel]').each(function(element) {
        new Tip(element, element.rel,{
            title: "Bio",
            closeButton: true,
            showOn: 'click',
            hideOn: { element: 'closeButton', event: 'click'},
            stem: 'bottomMiddle',
            hook: { target: 'topMiddle', tip: 'bottomMiddle' },
            offset: { x: 0, y: -2 },
            width: '300px'
        });
      });
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-05-29
      • 1970-01-01
      • 1970-01-01
      • 2017-09-15
      • 1970-01-01
      • 2013-09-25
      • 1970-01-01
      相关资源
      最近更新 更多