如何使用数据元素的值作为选择器jquery

时间:2014-05-11 00:21:12

标签: javascript jquery html css twitter-bootstrap

有没有办法将数据元素的值用作选择器 我想在data-select attr中使用“#login”来选择ff代码中的span:

<div class="pop" data-select="#login" data-toggle="popover" title="What is it?" data-content="Amazing content."  data-placement="left">Help!</div>
<span id="login">okay</span>

我试过这个(使用bootstrap js):

<script>
  $('.pop').popover({selector: '[data-popover]'});
</script>

谢谢...

5 个答案:

答案 0 :(得分:1)

$($(".pop")[0].dataset.select)

jsfiddle http://jsfiddle.net/guest271314/aGTKW/

答案 1 :(得分:0)

尝试使用{selector: '[data-toggle="popover"]'}

答案 2 :(得分:0)

我不是100%肯定你在问什么,但我认为这可能会对你有所帮助。

dataSelect = $this.data('select');

这将为您获取数据标记的内容,然后您可以使用&#34; dataSelect&#34;中的内容。变量来选择范围。

如果这不是您正在寻找的东西,也许您可​​以设置一个JS小提琴或更具体的问题。

答案 3 :(得分:0)

<强> Refer this SO Answer

  

在询问问题之前,始终在SO中搜索;)

@Bass Jobsen为此提供了出色的解决方案:

不使用数据元素,因为它们是在初始化时设置的,而不是在元素显示时设置的。这对于仅对初始化器中的所有设置使用相同选项的选择器不起作用。

快速修复扩展您的show功能并在那里设置选项:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script>    

var tmp = $.fn.popover.Constructor.prototype.show
$.fn.popover.Constructor.prototype.show = function () {
  var $e = this.$element
  if (typeof($e.attr('data-html')) != 'undefined')this.options.html = ($e.attr('data-html')==='true') 
  if (typeof($e.attr('data-placement')) != 'undefined')this.options.placement = $e.attr('data-placement');
  /* add other options here */
  tmp.call(this);
}

答案 4 :(得分:0)

我终于创造了一个有效的解决方法!!! 我认为可以使用一个按钮来触发您实际想要弹出窗口的元素上的弹出窗口 让我告诉你我的意思:

JS&gt;&gt;
<script> $('.pop').popover({delay: { show: 200, hide: 100 }}); var cont = $(".pop-sel")[0].dataset.select; $('body').on('click', '.pop-sel', function(e) { $(cont).popover('toggle'); }); $(cont).popover({trigger: 'manual', delay: { show: 200, hide: 100 }}); </script>

HTML&gt;&gt;
    <span class="badge pop-sel" id="loginSel" data-toggle="popover" data-select="#login">?</span>
    <input type="text" class="form-control" id="login" name="login" maxlength="10" value="" data-title="What is xIdentity?" data-content="And here's some amazing content. It's very engaging. right?" data-placement="right" data-selector="loginSel" required>

因此,徽章会触发输入的弹出窗口 感谢guest271314回复,它给了我这个想法! 如果你创造了一个小提琴,请为别人评论它的位置 如果我有空闲时间,我可能会添加一个小提琴 你们真棒!