主页 / 问题 / 924117
Accepted
Nice
Asked:2020-12-22 20:00:02 +0000 UTC2020-12-22 20:00:02 +0000 UTC

条件下元素的外观

  • 772

如果块中的至少一个段落具有 .clicked 类，则必须显示该按钮。这是我能想到的......：由于某种原因，按钮立即出现，尽管 .clicked 类没有一个 p。

 $("p").click(function() {
  	$(this).toggleClass("clicked");
	});
  if ($(".block").find("p.clicked")) {
    $('button').css('display', 'block');
  } else {
    $('button').css('display', 'none');
  };
.clicked {
  background: #000;
  color: #fff;
  transition: .2s;
}

p {
  border: 1px solid #000;
  padding: 7px;
  margin: 0 0 5px;
}

button {
  padding: 10px;
  border: none;
  border-radius: 4px;
  background: red;
  color: #fff;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <p>Далеко-далеко за словесными горами в стране.</p>
  <p>Далеко-далеко за словесными горами в стране.</p>
  <p>Далеко-далеко за словесными горами в стране.</p>
  <p>Далеко-далеко за словесными горами в стране.</p>
  <p>Далеко-далеко за словесными горами в стране.</p>
</div>

<button>Готово!</button>

html

1 个回答

  1. Best Answer

    您应该在函数中添加一个条件，以便在每次点击时进行检查，而不是在页面加载时进行一次：

     $("p").click(function() {
  $(this).toggleClass("clicked");
    if ($(".clicked").length) {
      $('button').css('display', 'block');
    } else {
      $('button').css('display', 'none');
    };
});
    .clicked {
  background: #000;
  color: #fff;
  transition: .2s;
}

p {
  border: 1px solid #000;
  padding: 7px;
  margin: 0 0 5px;
}

button {
  padding: 10px;
  border: none;
  border-radius: 4px;
  background: red;
  color: #fff;
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <p>Далеко-далеко за словесными горами в стране.</p>
  <p>Далеко-далеко за словесными горами в стране.</p>
  <p>Далеко-далеко за словесными горами в стране.</p>
  <p>Далеко-далеко за словесными горами в стране.</p>
  <p>Далеко-далеко за словесными горами в стране.</p>
</div>

<button>Готово!</button>

    • 2

相关问题