通过自定义属性访问元素 - JQuery [关闭]

Posted

技术标签:

【中文标题】通过自定义属性访问元素 - JQuery [关闭]【英文标题】:Accessing an Element by Custom Attribute - JQuery [closed] 【发布时间】:2013-12-21 08:44:39 【问题描述】:

我试图通过选择其自定义属性来隐藏一个元素。我正在做的不是找到元素。

谢谢

下面的示例也在这里 (JSFiddle)

<p>
<a href="#" 
   data-dialog-id="rosterModal" 
   data-dialog-title="Roster Confirmation" 
   class="btn blue js-openDialog">My Link to Hide</a>
</p>
<p>
  <button id="hideBtn">Hide</button>
</p>

<script type="text/javascript">
$( document ).ready(function() 

    $('#hideBtn').click(function() 
        var myLink = $("a[data-dialog-id='rosterModal']");
        myLink.hide();
    );
);
</script>

【问题讨论】:

好吧,您正在尝试将事件处理程序绑定到 #hideme,但按钮的 ID 是 hideBtn 而且在小提琴中,您的数据属性也有错字 这个问题似乎是题外话,因为它是关于错别字 这个问题似乎是题外话,因为问题是使用了错误的 ID(基本上是一个错字)。这个问题对其他人没有多大用处。 【参考方案1】:

你几乎拥有它。

    您在 JSFiddle 中的 a 标签属性是 data-dislog-id(错字)

    您的选择器正在寻找#hideme,应该是#hideBtn

在这里工作:http://jsfiddle.net/LM2mp/3/

【讨论】:

谢谢 - 完全错过了那个错字【参考方案2】:

看起来hideme 不是您表单中的 ID。我想你想改用hideBtn

【讨论】:

【参考方案3】:

按钮 ID 错误

<script>
$(function()
    $('#hideBtn').click(function() 
        var myLink = $("[data-dialog-id='rosterModal']");
        $(myLink).hide();
    );
);
</script>

【讨论】:

【参考方案4】:
$('#hideBtn').click(function() 
  var myLink = $("a[data-dialog-id='rostermodal']");
    console.log(myLink)
    myLink.hide();
);

这是一个演示:http://jsfiddle.net/LM2mp/7/

【讨论】:

以上是关于通过自定义属性访问元素 - JQuery [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

通过 JavaScript 访问 CSS 自定义属性(又名 CSS 变量)

jQuery 属性等于选择器不适用于自定义属性

jQuery $.fn.extend方式自定义插件

jquery attr和data给元素添加自定义属性

使用 jQuery 验证插件显示自定义元素和内容

vue-resource,自定义指令,注册组件,ref属性访问