是否可以将定义的变量用作 jQuery 中数据属性选择器的一种 'data-content'？

Question

我想知道是否可以在 jQuery.

中将定义的变量用作数据属性选择器的一种 "data-content"

假设我有一个名为 "imageNumber" 的变量，它由整数组成：

var imageNumber = 1;

我有一排预览图片，其中包含背景图片属性和名为 'data-image-number="1"'、'data-image-number="2"' 等的数据属性：

<div style="background-image:url(example1.jpg);" data-image-number="1"></div>

我正在寻找一种方法来设置一种 "display"-div 的背景图像，该图像基于通过 [=51 中的变量（imageNumber）选择的另一种 div =].

$("#display_div").css("background-image", $("div[data-image-number='imageNumber']").css("background-image") );

$("#display_div").css("background-image", $("div[data-image-number='imageNumber']").css("background-image"));

此时我通过 if 子句查找每个案例：

    if ( imageNumber == 1 )
    {
        $("#display_div").css("background-image", $("div[data-image-number='1']").css("background-image"));
    }
    if ( imageNumber == 2 )
    {
        $("#display_div").css("background-image", $("div[data-image-number='2']").css("background-image"));
    }

我需要这个定时器来通过变量 "imageNumber" 更新 "display_div" 的背景图像，因为图像在显示器中一张一张地淡出，用户应该有单击预览图像的选项，将变量 "imageNumber" 设置为淡入淡出行中的位置，淡入淡出行将再次正常工作。

我 fear/guess 这个问题没有语法，我必须用另一种方式解决它，或者使用 if 子句，对吗？

Answer 1

您只需使用字符串连接：

$("#display_div").css("background-image", $("div[data-image-number=" + imageNumber + "]").css("background-image"));

或者如果您要连接的内容可能有空格等，请使用引号：

$("#display_div").css("background-image", $("div[data-image-number='" + imageNumber + "']").css("background-image"));

在 ES6 (ECMAScript 2015) 中，您还可以使用模板字符串：

$("#display_div").css("background-image", $(`div[data-image-number='${imageNumber}']`).css("background-image"));

...但大多数浏览器尚不支持它们。

是否可以将定义的变量用作 jQuery 中数据属性选择器的一种 'data-content'？

Is it possible to use a defined variable as a kind of 'data-content' for the data attribute selector in jQuery?

css

jquery

attributes

selector