Появление элемента при условии

158

01 июля 2019, 00:10

Нужно чтобы появилась кнопка при условии, что если хотя бы один из параграфов в блоке имеет класс .clicked. Вот то, до чего смог додуматься...: И кнопка почему то появляется сразу, хотя ни одного p с классом .clicked нет.

 $("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>

Answer 1

Вам следует поместить условие в функцию, чтобы проверка происходила при каждом клике, а не единожды - при загрузке страницы:

 $("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>