默認var如果「$（this）.attr（'data-id'）」未定義

Question

我正在學習「即時」，所以請原諒我的無知。我想弄清楚如何將默認的「folderID」傳遞給下面的我的#next和#prev點擊函數。我在正確的道路上嗎？或完全離開基地？非常感謝您的時間。 ķ

$(function() { 

var folderID = $('.folderID').attr("data-id"); 



$("#next").click(function() { 
var myInbox = "/test/SecComm/ajax_inboxResults.cfm?startRow="+nextstart; 
myInbox+="&folderID="+folderID; 
    $.get(myInbox,function(data){ 
     $("#messageList").html(data); 
    }); 
}) 

$("#prev").click(function() { 
var myInbox = "/test/SecComm/ajax_inboxResults.cfm?startRow="+prevstart; 
myInbox+="&folderID="+folderID; 
    $.get(myInbox,function(data){ 
     $("#messageList").html(data); 
    }); 
}) 

$(".folderID").click(function() { 
var folderID = $(this).attr('data-id');        
<cfoutput>var myInbox = "/test/SecComm/ajax_inboxResults.cfm 
folderID="+folderID;</cfoutput> 
    $.get(myInbox,function(data){ 
     $("#messageList").html(data); 
    }); 
}) 

}）

var prevstart = 1 
var nextstart = 1 


function showPrev(newprevstart){ 
prevstart = newprevstart 
$("#prev").show() 
} 

function hidePrev(){ 
$("#prev").hide() 
} 

function showNext(newnextstart){ 
nextstart = newnextstart 
$("#next").show() 
} 

function hideNext(){ 
$("#next").hide() 
} 

Answer 1

你是在正確的道路上，但我會保存你的變量選擇$(this).attr('data-id')的結果，這樣你就不必了在執行查找DOM再次。

Answer 2

正如你已經在你的元素上有'data-id'屬性，你可以在函數中找到該屬性的值。

$("#next").click(function() { 

// Get the value of the custom data value 
var folderID = $('.folderID').attr("data-id"); 

var myInbox = "/test/SecComm/inboxResults.cfm?startRow="+nextstart; 
myInbox+="&folderID="+folderID; 
    $.get(myInbox,function(data){ 
     $("#messageList").html(data); 
    }); 
}) 

Answer 3

你可以嘗試以下方法：

var folderID = $(this).attr('data-id') || 1; 

JS Fiddle demo

上述分配data-attribute給變量folderID值，如果選擇不返回匹配，那麼它分配默認值爲1。

在2016年，且相當可能自2015年，這是可能的，而不是使用使用DOM –獲取data-id屬性值以及jQuery的–這些選擇的幾種方式都低於：

var folderID = $(this).data('id'); // jQuery 
var folderID = this.dataset.id; 
var folderID = this.getAttribute('data-id'); 

顯然全部這些要求this是您希望從中檢索屬性值的適當元素。

下面提出的註釋指出了上述明顯缺陷：

請注意，如果你有一個的data-id 0，這將使用值1，而不是（0是一個falsy值）。

考慮到這一點是值得重新審視的問題，表現出非常相似的解決方案，但使用檢查data-id存在：

var folderID = 'undefined' !== typeof this.dataset.id ? this.dataset.id : 1; 

隨着我們檢查是否類型以上（typeof ）的參考性質不相等（!==）至undefined;如果它不等於undefined，那麼我們檢索存儲在該屬性中的值（屬性值this.dataset.id是data-id屬性的屬性值），或者如果它是undefined，那麼我們提供的值爲1。

這種方法使用的條件（三元）運算符，在該表達式中用於true/false（或truthy/falsey），並且如果該表達式評估爲true/truthy則使用以下的?字符的第一個語句進行評價。如果該表達式評估爲false/falsey然後第二個語句，繼:中，使用：

var variableName = expression ? ifTrue : ifFalse; 

參考文獻：

• JavaScript的：
  • Conditional (ternary) Operator。
  • Element.getAttribute()。
  • HTMLElement.dataset。
• 的jQuery：
  • attr()。
  • data()。

Answer 4

普通簡寫爲：

var folderID = $(this).attr('data-id') || 1;