如何在JavaScript中将数据属性值转换为整数？

Question

我一直在到处寻找答案，但似乎找不到一个可行的解决方法。我有一个带有箭头和按钮的滑块，当单击箭头或按钮时，该函数会获取data-cs属性，然后用它来确定下一张幻灯片。

HTML代码：

<div id="arrowleft" class="sliderbtns flip" data-sc="prev"></div>
<div id="arrowright" class="sliderbtns" data-sc="next"></div>
<div id="buttons" class="sliderbtns">
<div class="selectedbtn sliderbtns" id="button1" data-sc="1"></div> 
<div class="button sliderbtns" data-sc="2"></div> 
</div>

the javascript

$( ".sliderbtns" ).click(function() {
    var button_data = $(this).attr('data-sc');
    myslider(button_data);
});

JavaScript中的函数

function myslider(position) {
    if (position == "next" && (currentslide == slidecount)) {
        position = 1;
    } else if (position == "next") {
        position = currentslide + 1; 
    } else if ((position == "prev") && (currentslide == 1)){
        position = slidecount;
    } else if ((position == "prev")) {
        position = position - 1;
    } else { 
        // position must then eqauls some integer from the data-sc attribute
        position =  parseInt(position);
        alert (position); // alerts properly the first time
        var out_slide = "Slide" + currentslide + "Out"; 
        var next_slide = "Slide" + position;
        alert(out_slide); //these work fine the first time 
        alert(next_slide);
        window[next_slide]();        
        window[out_slide]();
        // later on in the slide currentslide becomes position after this it returns value of Nan
        setTimeout( function() {
            currentslide = position;
            alert("this is the current slide position" + currentslide);
        }, 2000);
    /* ommited code */
    }
 }

当我只点击箭头时，它们可以正常工作，但是当我点击按钮时，它会正确地跳转到下一张幻灯片，但所有按钮均不再起作用，并显示当前位置为NaN。我试过许多种方法将位置变量设置为int类型，如Number(position)、ToInt和ParseInt等，但仍然返回NaN，幻灯片无法找到正确的幻灯片和功能等...如果有人知道我做错了什么或者如何确保它是一个实际的整数（如果从数据属性中获取可能的话），或者其他方法可以将该数据传递为int，这些int可以通过单击箭头或按钮来获取。非常感谢任何帮助！

- Alex

Answer 1

使用.data()来获取数据:

 $(this).data('sc')

- Milind Anantwar

---

.data 似乎会返回数字值。不需要使用 parseInt。 - Cerbrus

你也可以使用 $(this).data('sc') * 1 ;) - TheGr8_Nik

在使用 parseInt 时，始终添加 radix。parsetInt(var, 10) 可以解析为基数 10。 - phylax

感谢大家的评论，帮助了我，现在一切都很好，再次感谢所有回答和评论。但是我也意识到问题的部分原因实际上是HTML方面的，因为我不小心在按钮的包装器中和每个单独的按钮中都包括了sliderbtns类，所以它实际上调用了两次函数，当然，由于包装器没有data-sc属性，它可能从一开始就获取了Nan值。但现在一切正常了，再次感谢并祝一切顺利！ - Alex

Answer 2

看起来没有人看这个问题。

NaN应该是由以下原因引起的：

position = currentslide + 1;

从代码中，我看不到 currentslide 被初始化。如果你执行 undefined + 1，你会得到 NaN。

全局设置 currentSlide = 0 可以使其正常工作。除非你正在隐藏代码。

---

附注：标题与描述中提出的问题不匹配。

- jancha