jquery – 默认var,如果“$(this).attr(‘data-id’)”未定义

前端之家收集整理的这篇文章主要介绍了jquery – 默认var,如果“$(this).attr(‘data-id’)”未定义前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在“学习”,所以请原谅我的无知.我正在试图找出如何将默认的“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()
}

解决方法

您可以尝试以下方法
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');

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

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

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.

这种方法使用条件(三元)运算符,其中表达式被评估为真/假(或真或假),如果表达式求值为真/真,那么第一个语句在?之后?字符被使用.如果表达式的计算结果为false / falsey,则使用以下第二个语句:

var variableName = expression ? ifTrue : ifFalse;

参考文献:

> JavaScript:

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

> jQuery:

> attr().
> data().

猜你在找的jQuery相关文章