Javascript 在单击时插入HTML或附加子元素，并从先前单击的元素中删除

我在一个容器中有一组div元素，

.div to hide

默认显示，而

.div to show

则隐藏

当我在.set中单击时，要隐藏的

.div应该隐藏，要显示的
.div应该可见。下一次单击应将上一次单击的元素返回到其默认状态

我需要在
.div上单击“显示到”按钮以显示

<div class="container">
  <div class="set">
    <div class="div-to-hide">Some text</div>
    <div class="div-to-show"></div>
  </div>
  <div class="set">
    <div class="div-to-hide">Some text</div>
    <div class="div-to-show"></div>
  </div>
  <div class="set">
    <div class="div-to-hide">Some text</div>
    <div class="div-to-show"></div>
  </div>
</div>

不能让它正常工作。。我不知道我错过了什么

非常感谢您的帮助

更新：让它工作！谢谢大家
 考虑改用类切换

$('.set').on('click', function(e) {
  $('.set').removeClass('hidden-child');
  $(this).addClass('hidden-child');
});

css:

这将使您的代码更容易推理，并让css控制显示（样式）规则

编辑：为了清晰起见更改了类名；扩大解释；更正答案以符合问题
首先，您没有使用（$.on（）函数上的第二个参数）来定义
。将
元素设置为函数中的
this

如果我理解正确，您希望显示上次单击的元素并隐藏其余元素。你真的不需要知道你最后点击了哪一个来做这件事

$('.container').on('click', '.set', function (e) {
    // Now "this" is the clicked .set element
    var $this = $(this);
    // We'll get the children of .set we want to manipulate
    var $div_to_hide = $this.find(".div-to-hide");
    var $div_to_show = $this.find(".div-to-show");

    // If it's already visible, there's no need to do anything
    if ($div_to_show.is(":visible")) {
        $div_to_hide.show();
        $div_to_show.hide();
    }

    // Now we get the other .sets 
    var $other_sets = $this.siblings(".set");

    // This second way works for more complex hierarchies. Uncomment if you need it
    // var $other_sets = $this.closest(".container").find(".set").not(this);

    // We reset ALL af them
    $other_sets.find(".div-to-show").hide();
    $other_sets.find(".div-to-hide").show();
});

尝试使用jQuery隐藏和显示其他div，使用jQuery显示和隐藏自身，还需要在
上设置
单击（）
事件。设置
，而不是在
容器中设置


$（文档）.on（'click'，'set'，函数（e）{
$（this.find（'.hide'）.toggle（）；
$（this.find（'.show'）.toggle（）；
$（this）.sides（'.set'）.find（'.hide'）.show（）；
$（this）.sides（'.set'）.find（'.show'）.hide（）；
});
.show{
显示：无；
}
.set div{
填充：10px；
字体：13px Verdana；
字体大小：粗体；
背景：红色；
颜色：#ffffff；
边缘底部：10px；
光标：指针；
}

1隐藏
1场
2隐藏
2秀
3隐藏
3秀
$（'.container'）
typo？如果错误是一个打字错误，
@AbdeslemCharif上也缺少一个括号，那么编辑问题来修复这个打字错误是不太合适的。因此，如果我理解正确，您需要只在最后一次单击集时显示“div to show”类。为什么要添加一个类，然后使用toggleClass而不仅仅是$.toggle（）? 为什么要多做一点呢？通过在顶级元素上切换类，可以避免逐个查找和操纵子类。它使您更容易遵循您的逻辑。它应该交替，检查css规则。啊，您正在使用更具体的规则来覆盖。我明白了，全球化是有意的。当应用更具体的隐藏子规则时，应覆盖该规则。编辑：忍者d
.hidden-child .div-to-hide, .div-to-show {
  display: none;
}
.hidden-child .div-to-show, .div-to-hide {
  display: block;
}

$('.container').on('click', '.set', function (e) {
    // Now "this" is the clicked .set element
    var $this = $(this);
    // We'll get the children of .set we want to manipulate
    var $div_to_hide = $this.find(".div-to-hide");
    var $div_to_show = $this.find(".div-to-show");

    // If it's already visible, there's no need to do anything
    if ($div_to_show.is(":visible")) {
        $div_to_hide.show();
        $div_to_show.hide();
    }

    // Now we get the other .sets 
    var $other_sets = $this.siblings(".set");

    // This second way works for more complex hierarchies. Uncomment if you need it
    // var $other_sets = $this.closest(".container").find(".set").not(this);

    // We reset ALL af them
    $other_sets.find(".div-to-show").hide();
    $other_sets.find(".div-to-hide").show();
});