jquery - jQuery - 隐藏/显示相关 div 是否有文本

Question

listview您可以通过.block单击每个.item. 我的代码的问题在于，在切换回所有静止显示时，gridview它被设置为始终显示。.blocklistview.blocks

我if在 click 函数中的语句listview尝试识别按钮的文本，然后.block在按钮显示“关闭？”时切换位置。- > 显示.block

测试：单击其中一个按钮上的“打开”，然后从gridview返回切换到listview。您可以看到所有.block内容仍在显示，而不是仅在按钮文本 =“关闭？”的位置显示。

$(".gridview").on("click", function() {
  var $this = $(this).closest(".container");
  $this.find(".list").attr("data-view", "grid");
  $this.find(".listview").removeClass("active");
  $this.find(".gridview").addClass("active");
  /*Always show the .block in gridview*/
  $this.find(".block").css("display", "flex");
  $this.find("button").hide();
});

$(".listview").on("click", function() {
  var $this = $(this).closest(".container");
  var $item = $this.closest(".item");
  $this.find(".list").attr("data-view", "list");
  $this.find(".gridview").removeClass("active");
  $this.find(".listview").addClass("active");
  $this.find("button").show();
  /*If .block was opened before -> show, else hide
  if ($("button").text() == "Close?") {
    var $block = $(this).closest(".item").find(".block");
    $block.show();
  } else {
    $block.hide();
  }*/
});
/*For each open / close button in listview:*/
$("button").click(function() {
  var $this = $(this).closest(".container");
  var $item = $(this).closest(".item");
  var $groupItem = $this.find(".item");
  var media = $item.find(".block");
  if ($this.find(".list").attr("data-view") == "list") {
    if ($(this).text() == "Close?") {
      media.hide();
      $(this).text("Open");
    } else {
      media.css("display", "flex");
      $(this).text("Close?");
    }
  }
});

.item {
  margin: 1.3rem 0;
  border: 2px solid;
}

.block {
  display: none;
  height: 45px;
  width: 45px;
  border: 2px solid green;
}

.active {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="gridview">Grid</div>
  <div class="listview active">List</div>
  <div class="list" data-view="list">
    <div class="item">
      <button>Open</button>
      <div class="block"></div>
    </div>
    <div class="item">
      <button>Open</button>
      <div class="block"></div>
    </div>
  </div>
</div>

标签： jquery

Answer 1

我通过创建一个函数来遍历每个项目并调用它来解决这个问题listview：

function view() {
  $(".item").each(function (index, element) {
    var $this = $(this);
    var $btn = $this.find("button");
    if ($btn.text() == "Close?") {
      $this.find(".block").show();
    } else {
      $this.find(".block").hide();
    }
  });
}
view();

$(".gridview").on("click", function () {
  var $this = $(this).closest(".container");
  $this.find(".list").attr("data-view", "grid");
  $this.find(".listview").removeClass("active");
  $this.find(".gridview").addClass("active");
  /*Always show the .block in gridview*/
  $this.find(".block").css("display", "flex");
  $this.find("button").hide();
});

$(".listview").on("click", function () {
  var $this = $(this).closest(".container");
  var $item = $this.closest(".item");
  $this.find(".list").attr("data-view", "list");
  $this.find(".gridview").removeClass("active");
  $this.find(".listview").addClass("active");
  $this.find("button").show();
  view();
  /*If .block was opened before -> show, else hide*/
});
/*For each open / close button in listview:*/
$("button").click(function () {
  var $this = $(this).closest(".container");
  var $item = $(this).closest(".item");
  var $groupItem = $this.find(".item");
  var media = $item.find(".block");
  if ($this.find(".list").attr("data-view") == "list") {
    if ($(this).text() == "Close?") {
      media.hide();
      $(this).text("Open");
    } else {
      media.css("display", "flex");
      $(this).text("Close?");
    }
  }
});

function view() {
  $(".item").each(function (index, element) {
    var $this = $(this);
    var $btn = $this.find("button");
    if ($btn.text() == "Close?") {
      $this.find(".block").show();
    } else {
      $this.find(".block").hide();
    }
  });
}
view();

.item {
  margin: 1.3rem 0;
  border: 2px solid;
}
.block {
  display: none;
  height: 45px;
  width: 45px;
  border: 2px solid green;
}
.active {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="gridview">Grid</div>
  <div class="listview active">List</div>
  <div class="list" data-view="list">
    <div class="item">
      <button>Open</button>
      <div class="block"></div>
    </div>
    <div class="item">
      <button>Open</button>
      <div class="block"></div>
    </div>
  </div>
</div>