Question

以下代码是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");
    }

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

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

Answer 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();

Answer 2

尝试：

$("#caption" + vars.current_slide)

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

访问它

Answer 3

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

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

如何在jquery中使用变量用于html-element？

3 个答案: