从数组中获取元素属性

Question

目标是通过将滑块链接到某物来在页面上创建多个滑块。 必须通过单击或悬停滑块锚点来激活滑块。 sliderList将是一个使这个过程更容易的数组，所以我不必在 configs js 文件上手动链接彼此。

我需要从数组内的元素中获取属性值。 在这种情况下， holder是我想要从当前数组元素中提取属性值的数组。 我尝试这样做：

var holder = $('[slider-select]');

for (var i = 0; i < holder.length; i++) {
    var sliderList = $('[slider-target='
        +holder[i].attr('slider-select')
        +']');
}

看起来+holder[i].attr('slider-select')不起作用。 我正在学习 JavaScript/Jquery，即使一切都说得通，事情还是会出错，哈哈。 如果我不够清楚，请告诉我。

Answer 1

holder[i]包含一个普通的 DOM 元素，但您尝试在其上使用 jQuery attr方法。 您需要将其转换为 jQuery 对象$(holder[i]) （或者在 DOM 元素上使用本机getAttribute ）：

 var holder = $('[slider-select]'); for (var i = 0; i < holder.length; i++) { // Splitting this up a bit just to make it more readable: var val = $(holder[i]).attr('slider-select'); // instead of holder[i].attr(...) var sliderList = $('[slider-target="' + val + '"]'); // confirm we got the element: console.log(sliderList.text()); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div slider-select="A">A</div> <div slider-select="B">B</div> <div slider-select="C">C</div> <div slider-target="A">a</div> <div slider-target="B">b</div> <div slider-target="C">c</div>

Answer 2

函数attr是 jQuery 的内置函数，它是函数getAttribute和setAttribute的简写。

在你的情况下，你想这样做：

var holder = $('[slider-select]');

for (var i = 0; i < holder.length; i++) {
    var test = holder[i];
    var sliderList = $('[slider-target=' + holder[i].getAttribute('slider-select') + ']');
}                                                    ^

一个好的方法是使用 jQuery 内置函数，所以你可以使用这个：

$('[slider-select]').each(function() {
    var sliderList = $('[slider-target=' + $(this).attr('slider-select') + ']');                  
});                                                ^ 

资源

• .attr()
• getAttribute
• setAttribute
• .each()

Answer 3

attr 方法不是 JS 元素对象上的函数。 您需要将它包装在 jquery 中以检索属性值。 例如

$(holder[i]).attr("slider-select")