"$(this).attr('data-id')“未定义时的默认变量

Question

我正在学习“在飞行中”，所以请原谅我的无知。我正在尝试弄清楚如何将一个默认的"folderID“传递给我下面的#next和#prev单击函数。我走的路对吗？还是完全不靠谱？非常感谢您的宝贵时间。K

$(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

您可以尝试执行以下操作：

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

JS Fiddle demo

上面的代码将data-attribute的值赋给变量folderID，如果选择器没有返回匹配项，那么它将赋给默认值1。

在2016年，很可能从2015年起，可以使用几种方法来获取data-id属性值-使用DOM -以及jQuery -这些选项如下：

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

显然，所有这些都要求this是您希望从中检索属性值的适当元素。

下面的评论指出了上面的明显缺陷：

请注意，如果您的data-id为0，则将使用值1 (0表示假值)。

考虑到这一点，值得重新考虑这个问题，以显示非常类似的解决方案，但使用检查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;

参考文献：

• Conditional (ternary) Operator.
• Element.getAttribute().
• HTMLElement.dataset.

：

• JavaScript

​

• attr().
• data().

：

• jQuery

​

Answer 2

通常的速记为：

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

Answer 3

虽然我会将选择器$(this).attr('data-id')的结果存储在一个变量中，这样您就不必再次查找DOM，但您的方法是正确的。