jquery - 默认 var if "$(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 年以来，可以使用多种方式使用 DOM 以及 jQuery 来获取 data-id 属性值，这些选项如下:

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

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

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

Please note that if you have a data-id of 0, this will use the value 1 instead (0 being a falsy value).

考虑到这一点，值得重新审视这个问题，以展示一个非常相似的解决方案，但使用检查 data-id 是否存在:

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

通过上面的内容，我们检查引用属性的类型 (typeof) 是否不等于 (!==) 到 undefined ;如果它不等于 undefined，我们将检索存储在该属性中的值(this.dataset.id 的属性值是 data-id 属性)，或者，如果它是未定义，那么我们提供值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() .