如果"$(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

您可以尝试以下方法:

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

JS小提琴演示

上面指定了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您希望从中检索属性值的适当元素.

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

请注意,如果您的a 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;

参考文献:

• JavaScript的:
  • 条件(三元)运算符.
  • Element.getAttribute().
  • HTMLElement.dataset.
• jQuery的:
  • attr().
  • data().

Answer 2

你走在正确的道路上，尽管我会将选择器的结果存储$(this).attr('data-id')在一个变量中，这样你就不必再次在 DOM 上执行查找。