Question

我在容器中有一组div元素，默认显示.div-to-hide，而隐藏.div-to-show。

当我点击.set时，.div-to-hide应隐藏，.div-to-show应该可见。下一次单击应将先前单击的元素返回到其默认状态。

我需要在.div-to-show上点击内部按钮显示。

<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>

到目前为止，我有这个：

let lastClicked;
$('.container').on('click', function(e) {
  if (this == lastClicked) {
    lastClicked = '';
    $('.div-to-hide').show();
    $(this).children('.div-to-hide').hide();
  } else {
    lastClicked = this;
    $('.div-to-hide').hide();
    $(this).children('.div-to-hide').show();
    $(this).children('.div-to-show').hide();
  }
});

无法让它正常工作......我不知道我错过了什么......

非常感谢任何帮助！

更新：让它工作！谢谢大家！

Answer 1

首先，您没有使用delegation（$ .on（）函数的第二个参数）将.set元素定义为函数内的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();
});

Answer 2

考虑使用类切换。

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

的CSS：

.hidden-child .div-to-hide, .div-to-show {
  display: none;
}
.hidden-child .div-to-show, .div-to-hide {
  display: block;
}

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

编辑：为了清晰起见改变了班级名称;扩大解释;纠正回答以符合问题

Answer 3

尝试使用 siblings() jQuery来隐藏和显示其他div以及 toggle() jQuery显示和隐藏自身，您还需要在click()上设置.set事件，而不是.container

＆＃13;

$(document).on('click', '.set', function(e) {
  $(this).find('.hide').toggle();
  $(this).find('.show').toggle();
  $(this).siblings('.set').find('.hide').show();
  $(this).siblings('.set').find('.show').hide();
});

＆＃13;

.show {
  display: none;
}

.set div {
  padding: 10px;
  font: 13px Verdana;
  font-weight: bold;
  background: red;
  color: #ffffff;
  margin-bottom: 10px;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="set">
    <div class="hide">1 Hide</div>
    <div class="show">1 Show</div>
  </div>
  <div class="set">
    <div class="hide">2 Hide</div>
    <div class="show">2 Show</div>
  </div>
  <div class="set">
    <div class="hide">3 Hide</div>
    <div class="show">3 Show</div>
  </div>
</div>

＆＃13;

插入HTML或附加Child onClick，并从之前单击的元素中删除

3 个答案: