jQuery使用变量来显示div

Question

我想使用.show()方法像幻灯片一样显示div元素。

我想实现的是，通过导航栏按钮的ID属性，将特定的幻灯片“滑入”，就像一个幻灯片播放器。例如，按钮1的ID为“1”。然后我使用jQuery将“＃slide”附加到该ID上，并得到“＃slide1”。这对应于我想要显示的特定幻灯片。到目前为止，我尝试使用$variable.show()方法未能使“slide” div出现。

我做错了吗？

以下是我的代码： http://jsfiddle.net/greyoxide/RN2jC/

$(".button").click(function () {
    $(".slide").hide();
    var content = $(this).attr('id');
    var fix = "'" + '#slide' + content + "'";
    $("#show").val(fix);
    $(fix).show();
});

- greyoxide

Answer 1

去掉单引号'，所以改为：

var fix = "'" + '#slide' + content + "'"; // This translates to "'#slide1'"

致：

var fix = '#slide' + content; // This translates to "#slide1"

最终结果：

$(".button").click(function () {
    $(".slide").hide();
    var content = $(this).attr('id');
    var fix = '#slide' + content;
    $("#show").val("'" + fix + "'"); // If you still want to display single quotes
    $(fix).show();
});

http://jsfiddle.net/RN2jC/9/

- Mario S

---

感谢您的帮助和示例。我想我认为我需要引号才能以变量形式调用它。 - greyoxide

Answer 2

您不需要在幻灯片ID周围加上引号。

$(".button").click(function () {
  $(".slide").hide();
  var content = $(this).attr('id');
  var fix = '#slide' + content;
  $("#show").val(fix);
  $(fix).show();
});

请查看演示。

- zxqx

Answer 3

$(".button").click(function () {
    $(".slide").hide();
    $("#slide"+$(this).attr('id')).show();
});

jFiddle

- showdev

---

这比我的原始想法更加优雅。谢谢。 - greyoxide

Answer 4

移除你的fix字符串中的单引号：

var fix = "'" + '#slide' + content + "'";

应该改为：

var fix ='#slide' + content;

- Malk

Answer 5

为什么在fix之前和之后要加引号？这是错误的，否则它将无法工作：http://jsfiddle.net/RN2jC/6/

- Wouter J