如何在 JavaScript 而不是 jQuery 中捕获属性的值答案

【问题标题】：How to capture value of an attribute in JavaScript not jQuery如何在 JavaScript 而不是 jQuery 中捕获属性的值
【发布时间】：2017-02-22 13:26:18
【问题描述】：

我想使用 JavaScript 捕获标记上的属性值。我还没有成功。

这是我的 HTML 标记：

<html>
<head>
...
  <!-- bootstrap-slider Plugin -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css" rel="stylesheet">    
...
</head>
<body>
...
    <div class="form-group">
      <label class="col-md-4 control-label" for="language_spanish">Spanish</label>
      <div class="col-md-6">
        <input id="language_spanish" type="text" data-provide="slider"
          data-slider-ticks="[0,1,2]"
          data-slider-min="0"
          data-slider-max="2"
          data-slider-step="1"
          data-slider-value="0"
          data-slider-tooltip="show"
          data-identifier="this is what I want to capture"
        />
      </div>
    </div>
...
</body>
</html>

这是我的 javascript：

var spanish = new Slider( '#language_spanish', { formatter } );
spanish.on( 'slideStop', function( value ) {
  alert( value ); // this works perfectly!
  alert( this.getAttribute( 'data-identifier' ) ); // does not work
  alert( spanish.getAttribute( 'data-identifier' ) ); // does not work either
  alert( spanish.attr( 'data-identifier' ) ); // does not work as well
});

有可能吗？

仅供参考，jQuery 不适用于 bootstrap-slider。试了又试了，我一直在打砖墙。 JavaScript 是我可以使用此插件检索值和属性的唯一方法。

修改为包含插件的来源：

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css

【问题讨论】：

添加您正在使用的插件的来源总是更好。
将其添加到我的 OQ @Satpal -- 感谢您指出这一点
请使用 Stack Snippets（[<>] 工具栏按钮）用 runnable minimal reproducible example 更新您的问题，以便我们看到问题。
?不知道你的意思@T.J.Crowder
阅读链接的帮助页面，并使用 Stack Snippets（[<>] 工具栏按钮）放置一个 runnable（实时）示例来演示问题中的问题。它们有点像 jsFiddle 或 codepen 的现场版本。你可以从cdnjs.com加载外部资源。

标签： javascript getattribute bootstrap-slider

【解决方案1】：

你可以使用spanish.element对象，它返回底层DOM元素的引用，然后可以使用getAttribute()方法。

var spanish = new Slider('#language_spanish');
console.log(spanish.element.getAttribute( 'data-identifier'))

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.js"></script>


<div class="form-group">
  <label class="col-md-4 control-label" for="language_spanish">Spanish</label>
  <div class="col-md-6">
    <input id="language_spanish" type="text" data-provide="slider" data-slider-ticks="[0,1,2]" data-slider-min="0" data-slider-max="2" data-slider-step="1" data-slider-value="0" data-slider-tooltip="show" data-identifier="this is what I want to capture" />
  </div>
</div>

【讨论】：

哇——这就是答案@Satpal——.element.——非常感谢！！

【解决方案2】：

您正在尝试访问 spanish 上的属性，这是一个 Slider 对象，而不是 DOM 对象。滑块对象没有 getAttribute 方法。我建议您查看 Slider 插件文档，看看是否有检索 DOM 对象参数的方法，或者单独跟踪 DOM 元素。

如果你在 DOM 对象上使用 getAttribute 方法，它会像这样正常工作：

this.getAttribute( 'data-identifier' )

【讨论】：