如何在JavaScript中而不是jQuery中捕獲屬性的值

Question

我想使用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

Answer 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>

Answer 2

您正在嘗試訪問spanish上的屬性， spanish是一個Slider對象，而不是DOM對象。 滑塊對象沒有getAttribute方法。 我建議您查看Slider插件文檔，以查看是否有一種檢索DOM對象參數的方法，或者單獨跟蹤DOM元素。

如果在DOM對象上使用getAttribute方法，它將可以正常工作，如下所示：

this.getAttribute( 'data-identifier' )

如何在JavaScript中而不是jQuery中捕獲屬性的值

問題描述

2 個解決方案

解決方案1
3 已采納 2017-02-22 13:36:36

解決方案2
0 2017-02-22 13:38:36

如何在JavaScript中而不是jQuery中捕獲屬性的值

問題描述

2 個解決方案

解決方案1 3 已采納 2017-02-22 13:36:36

解決方案2 0 2017-02-22 13:38:36

解決方案1
3 已采納 2017-02-22 13:36:36

解決方案2
0 2017-02-22 13:38:36