如何在 jquery 中为 html-element 使用变量？答案

【问题标题】：how to use variable for html-element in jquery?如何在 jquery 中为 html-element 使用变量？
【发布时间】：2012-03-12 14:24:25
【问题描述】：

以下代码是 jQuery .js 文件的一部分（用于“超大”图像滑块）：

if (vars.current_slide == 0) {
 $("#captions").children().css("display", "none");
    $("#caption0").css("display","inherit").css("visibility","visible");
    } 
if (vars.current_slide == 1) {
 $("#captions").children().css("display", "none");
    $("#caption1").css("display","inherit").css("visibility","visible");
    } 
if (vars.current_slide == 2) {
 $("#captions").children().css("display", "none");
    $("#caption2").css("display","inherit").css("visibility","visible");
    }

如您所见，我尝试为每个current_slide 显示不同的标题（范围从#caption0 到#caption3）。

与我的示例不同，我如何缩短它以便通过变量分配每个 current_slide 的标题？

【问题讨论】：

标签： jquery html variables

【解决方案1】：

选择器只是一个普通的字符串，所以你可以像这样连接变量：

$("#caption" + vars.current_slide)

因此，在您的情况下，代码可以缩短为：

$("#captions").children().css("display", "none");
$("#caption" + vars.current_slide).css("display","inherit").css("visibility","visible");

甚至更短：

$("#captions").children().hide();
$("#caption" + vars.current_slide).show();

【讨论】：

好东西，这对我有用。感谢您的快速回答:)！还要感谢其他人；）。

【解决方案2】：

试试：

$("#caption" + vars.current_slide)

另一种方法是将元素放入数组并通过索引访问它

【讨论】：

【解决方案3】：

只需将变量附加到字符串：

$('#captions').children().hide();
  $('#caption' + vars.current_slide).css({
    'display': 'inherit',
    'visibility': 'visible'
   });
}

【讨论】：