使用INPUT的值并将其引用到DIV元素并且appendTo（）它

Question

我正在尝试做一个简单的代码（这样我就不必将其复制并粘贴到多个按钮），其中有任意数量的按钮，其值很简单，如“Home”，“Contact”，“注册“和那样的东西。因此，每当我单击该按钮时，都会在DIV（内容区域）元素中显示隐藏的div。

所以这就是我的意思：

（hiddenstuff123 id = home）（hidden321stuff id = register）（hid22st id = contact）

  

＆LT;主页＆gt;＆lt;联系＆gt;＆lt;注册＆gt; INPUT按钮

  

DIV区

单击“主页”按钮， hiddenstuff123 将显示在DIV区域，按“联系人”和 hid22st 显示，依此类推。

---

因此，JavaScript将收到GenericButton点击，并将获取BUTTON值，只需Generic选择具有该id（按钮值）的div并将appendTo（）添加到“DIV Area”。 所以我会展示我已经拥有的代码。

$('input:button').click(function(){
 var contentName = $(this).val().toLowerCase();
 $(contentName).appendTo('#pageContent');
});

到目前为止唯一的问题是他没有根据按钮值选择特定的隐藏div。

谢谢，抱歉我的英语不好。

Answer 1

假设您已分配<div id="home">，<div id="contact">等，这应该有效：

$('input:button').click(function(){
    var contentName = $(this).val().toLowerCase();
    $('#' + contentName).appendTo('#pageContent');
})

Answer 2

考虑以下HTML：

<button value="contact">CONTACT</button>

<div id="contact"></div>

以下jQuery应该可以工作：

$(':button').click(function(){
   var _id = $(this).val();
    $('#'+_id).appendTo('#pageContent');
});

Answer 3

contentName 是要显示的DIV的ID，对吗？所以你应该通过在ID前添加一个'＃'来告诉它是一个ID。

$('input:button').click(function(){
 var contentName = $(this).val().toLowerCase();
 $('#'+contentName).appendTo('#pageContent');
});