自定義屬性未定義

裏面THIS的jsfiddle我有2個按鈕，每一個自定義數據方向屬性：自定義屬性未定義

<div class="btn-group" id="controls"> 
    <button type="button" class="btn btn-primary btn-sm" data-direction="left">Prev</button> 
    <button type="button" class="btn btn-primary btn-sm" data-direction="right">Next</button> 
</div>

我試圖安慰後點擊按鈕登錄的方向屬性：

var updateCounter = function(){ 
    var direction = $(this).data("direction") 
    if(direction === "left") { 
    counter--; 
    } else { 
    counter++; 
    } 
    console.log(direction); 
}

但我得到的是undefined。爲什麼？

來源

2017-06-15 Razvan Zamfir

怎麼叫updateCounter？願意賭'這是'窗口，而不是點擊。 – epascarello

我檢查什麼是'this'調試器中的值，或嘗試搜索按鈕本身，而不是使用這個的。 –

[有沒有標準的函數來檢查JavaScript中的空，未定義或空白變量？]（https://stackoverflow.com/questions/5515310/is-there-a-standard-function-to-check -for-null-undefined或者空白變量in） –

變化updateCounter功能，因此，它需要一個參數，只是元素。

var numbers = [4, 9, 16, 25]; 
 
var counter = 0; 
 
var updateCounter = function(ele){ 
 
    var direction = $(ele).data("direction") 
 
    if(direction === "left") { 
 
     counter--; 
 
    } else { 
 
     counter++; 
 
    } 
 
    console.log(counter); 
 
    console.log(direction); 
 
} 
 

 
$('#numbers_wrapper').text(numbers[counter]); 
 

 
$('#controls button').on('click', function(e){ 
 
    updateCounter(this); 
 
    $('#numbers_wrapper').text(numbers[counter]); 
 
});

.numbers { 
 
    width: 34px; 
 
    height: 34px; 
 
    line-height: 34px; 
 
    text-align: center; 
 
    margin: 5px auto; 
 
    border: 1px solid #286da9; 
 
    background: #337ab7; 
 
    color: #fff; 
 
    border-radius: 2px; 
 
} 
 
.controls > div { 
 
    display: inline-block; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div class="numbers text-center" id="numbers_wrapper"></div> 
 
    <div class="controls text-center"> 
 
     <div class="btn-group" id="controls"> 
 
      <button type="button" class="btn btn-primary btn-sm" data-direction="left">Prev</button> 
 
      <button type="button" class="btn btn-primary btn-sm" data-direction="right">Next</button> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-06-15 17:37:30 gaetanoM

它的工作原理！你能解釋你的代碼嗎？（這會有所幫助）。謝謝！ –

對不起，我關閉了電腦。 **這個**關鍵字在你的函數中是指窗口對象。所以你需要傳遞你在事件處理程序中的正確值。 – gaetanoM

自定義屬性未定義

回答

相關問題