我是jQuery的新手。我有以下html div包含几个链接,每个链接都有几个数据属性
<div class="image-gallery">
j = 0;
@foreach (var image in @Model.Images)
{
<a class="secondary-img" href="..." data-img-sq-nr="@j" data-colorID="@image.ColorId" ... >
<img .../>
</a>
j++;
}
</div>
在jQuery脚本中,我需要找到具有特定data-colorID
的元素并获取其data-img-sq-nr
,我正在尝试这样的事情,但是这个obvisousy不起作用
var seq = $('.image-gallery a[data-colorID='some-other-variable'].attr(data-img-sq-nr));
非常感谢任何帮助,谢谢
你走在正确的轨道上。您的语句中只有一些小的语法错误,这就是全部。这是一个有效的演示:
$(function() {
var seq = $(".image-gallery a[data-colorID='A']").attr("data-img-sq-nr");
console.log(seq);
var seq2 = $(".image-gallery a[data-colorID='B']").attr("data-img-sq-nr");
console.log(seq2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-gallery">
<a class="secondary-img" href="#" data-img-sq-nr="0" data-colorID="A">Item 1</a>
<br/>
<a class="secondary-img" href="#" data-img-sq-nr="1" data-colorID="B">Item 2</a>
</div>
它必须是jQuery吗?在原生Javascript中这很容易:
const fooValue = 'foo'
const div = document.querySelector(`[data-foo=${fooValue}]`);
console.log(div.dataset.bar);
<div data-foo="foo" data-bar="baz"></div>
<div data-foo="foo2" data-bar="baz2"></div>
jQuery也很容易:
const fooValue='foo';
const div = $('[data-foo=' + fooValue + ']')
console.log(div.data('bar'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-foo="foo" data-bar="baz"></div>
<div data-foo="foo2" data-bar="baz2"></div>