Как заставить переменную «Счетчик» подсчитывать количество «div», которые создаются случайным образом и исчезают при нажатии на нее

Я должен генерировать случайное число «div», и когда я нажимаю «div», «div», на который я нажал, должен исчезнуть с помощью «fadeout». Количество отображаемых и потерянных в результате клика "div" будет подсчитываться с помощью счетчика, который будет отображаться в правом верхнем углу страницы.

Следующий код генерирует случайное число «div», но я не знаю, как заставить «div» исчезнуть и как подсчитать исчезнувший «div».

я пробовал это

  $("div").click(function()
  {
     $("div").fadeOut() ;
  });

Но когда я нажимаю на произвольный «div», все «div» на странице также исчезают. Я не хочу, чтобы все "div" исчезали сразу. Я хочу, чтобы исчезал и вычислялся только "div", на который я нажал.

  <!DOCTYPE html>
  <html>
    <head>

        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <meta charset = "UTF-8">
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
        <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
        <style>
        #Counter 
        {
         position: fixed ;
         top: 0 ;
         right: 0 ;
         width: 300px ;
         border: 3px solid grey ;
         background-color: lightpink ;
        }
        </style>

    </head>        

<body onload = "followMouse();">


 <div id = "Counter">Counter:</div>

 <script>

 $(document).ready(function()
 {  
  var Min_Width, Max_Width, Min_height, Max_height ;

  Min_Width = prompt("Please give the minimum width of div", "0") ;
  Max_Width = prompt("Please give the maximum width of div" , "700") ;
  Min_height = prompt("Please give the minimum height of div" , "0") ;
  Max_height = prompt("Please give the maximum height of div" , "500") ;

 function Random_Generator(Lower, Upper) 
 {
  var Random_Number = Math.floor(Math.random() * (Upper - Lower + 1) ) ; 
  return Random_Number ;
 }

 function Div_Generator()
 {
  var dfrag = document.createDocumentFragment() ;
  var count = Random_Generator(3, 200) ;
  var Counter = 0 ;

  for (var Counter = 0; Counter < count; Counter++)
  {
    var div = document.createElement("div") ;

    dfrag.appendChild(div) ;
  }

  for (Counter = 0; Counter < dfrag.childNodes.length; Counter++) 
  {
    div = dfrag.childNodes[Counter] ;

    alterDivStyle(div) ;
  }

  document.body.appendChild(dfrag) ;
 }

 function rndColor() 
 {
   var r = ('0' + Random_Generator(0,255).toString(16)).substr(-1), 
   g = ('0' + Random_Generator(0,255).toString(16)).substr(-1), 
   b = ('0' + Random_Generator(0,255).toString(16)).substr(-1) ;
   return '#' + r + g + b ;
 }

 function alterDivStyle(div)
 {

  div.style.width = Random_Generator(Min_Width, Max_Width) + "px" ; 

  div.style.height = Random_Generator(Min_height, Max_height) + "px" ;

  div.style.backgroundColor = rndColor() ;

  div.style.color = rndColor() ;

  div.style.position = "static" ;

  div.style.float = "right" ;

  div.style.border = '1px' ;

  div.style.border = "solid";

  div.style.borderColor = rndColor();

  div.style.borderWidth = rndColor();
 }

 Div_Generator() ;
 $("div").click(function()
 {
    $("div").fadeOut() ;
 });

}) ;

 </script>

 </body>

 </html>

javascript jquery html

07.04.2019 12:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте $(this).fadeOut(), чтобы получить целевой div по клику
Используйте селектор :visible и :hidden, чтобы выбрать видимые и скрытые элементы div.
Получите количество видимых/скрытых div в функции обратного вызова fadeOut(), чтобы получить количество после завершения эффекта.

 $("div").click(function(){
     $(this).fadeOut(function(){
        console.info($('div:hidden').length);
     }) ;
  });

Additional With dynamic generated divs you'll need to use $(document).on('click' , 'div' , function(){ instead of $("div").click(function(){

Если вы вызываете $("div").click каждый раз после создания div, это тоже работает, но $(document).on(....) кажется лучшей практикой.

— 07.04.2019 12:48

07.04.2019 12:17

чтобы убедиться, что только вы считаете div, которые должны учитываться, дайте им класс или данные, например:

$('<div class = "clickable" />").appendTo($("body"));

А позже fadeOut получить их длину

 $(".clickable").click(
    function(){
     $(this).fadeOut(function(){
        console.info($('.clickable').length);
     }) ;
 });

07.04.2019 12:22

Другие вопросы по теме

Недопустимые аргументы, переданные для взрыва при использовании ajax

Почему локальное хранилище не работает, даже если оно не должно открываться после обновления страницы?

После jquery hover() css:hover не активируется на моих элементах

Невозможно удалить флажок с помощью JavaScript

Есть ли способ показать кнопку на основе свободного места в коробке, сделанной

Получение пустых массивов при поиске элементов по классу с помощью Jquery

Как создать пагинатор django с помощью ajax?

Пользовательский скрипт, который я сделал, частично работает. Любое исправление?

ScrollTo() и jquery scrollTop() не работают в Chrome

Выберите конкретный div, созданный с использованием цикла for в функции, которая находится внутри цикла for

Как заставить переменную «Счетчик» подсчитывать количество «div», которые создаются случайным образом и исчезают при нажатии на нее

Ответы 2

Другие вопросы по теме

Похожие вопросы