Javascript 基于数据属性仅显示一个div

我已经阅读了stackoverflow中的其他问题，但我无法让它工作

    <div class="container wrapit" >
    <div id="one" style="display:none">
    one
    </div>
    <div id="two" style="display:none">
    two
    </div>
    <div id="three" style="display:none">
    three
    </div>
    </div>


    <div data-id="one" class="toggler">
    button1
    </div>

    <div data-id="two" class="toggler">
    button2
    </div>
 <div data-id="three" class="toggler">
    button3
    </div>

这是小提琴-

---

注意：这不是重复的，因为现在它同时显示一个和两个，我想隐藏其他元素，一次只显示一个

$（“.toggler”）。单击（函数（）{
$（'.container div'）.hide（）；//只需添加此行
var id=$（this.data（'id'）；
变量$div=$（'.wrapit>#'+id）；
$div.show（）；
});

一
二
三
按钮1
按钮2
按钮3
您想要类似的东西吗


$（“.toggler”）。单击（函数（）{
$（'.container div'）.hide（）；//只需添加此行
var id=$（this.data（'id'）；
变量$div=$（'.wrapit>#'+id）；
$div.show（）；
});

一
二
三
按钮1
按钮2
按钮3
Typo：您在追加字符串值，而不是
id
变量的值<代码>变量$div=$（'#'+id）很抱歉输入错误，现在已修复。主要问题是切换divs它为什么重复？我选择了Jquery ID，我只是想知道如何切换其他类型。一旦您修复了输入错误，请使用
toggle（）
而不是
show（）
我使用了toggle，但问题是当我单击button2时，它不应该显示ID oneTypo：您添加的是字符串值，而不是
ID
变量的值<代码>变量$div=$（'#'+id）很抱歉输入错误，现在已修复。主要问题是切换divs它为什么重复？我选择了Jquery ID，我只是想知道如何切换其他。一旦您修复了输入错误，请使用
toggle（）
而不是
show（）
我使用了toggle，但问题是当我单击按钮2时，它不应该显示ID
$( ".toggler" ).click(function() {

 var id = $(this).data('id');
   var $div = $('.wrapit > #'+ id );
    $div.show();

});