Мне нужно проверить, есть ли у div с именем «ContainterTwo» изображение с добавленным к нему классом «hd» или «tl», но мой блок if else никогда не выполняется. Изображения представляют собой теги html img внутри массива под названием «изображение». Я использую генератор случайных чисел, чтобы стимулировать подбрасывание монеты.

$(document).ready(function(){

    var image = ['<img src="heads.jpg" class="hd" height="50" width="50">', '<img src="tails.jpg" class="tl" height="50" width="50">'];

    $('#flip').on('click', function(){



        var heads = 0;
        var tails = 0;

        var numToFlip = parseInt($('#number').val().trim());

        for(var x = 0; x < numToFlip; x++)
        {
            var ran = Math.round(Math.random() * (1)) + 0;

            $('.ContainerTwo').append(image[ran]);

            if($('.ContainerTwo').hasClass('hd'))
            {
                heads++;
                $('.spOne').html(heads);
                $('.ContainerTwo').empty();
            }
            else if($('.ContainerTwo').hasClass('tl'))
            {
                tails++;
                $('spTwo').html(tails);
                $('.ContainerTwo').empty();
            }

        }


    })


})
1
H. Lee 22 Дек 2016 в 10:48
5
Используйте $('.ContainerTwo').find('img').hasClass('hd') или $('.ContainerTwo').find('img').hasClass('tl') найдите класс в img, а не в div
 – 
guradio
22 Дек 2016 в 10:50
3
Или, что еще лучше, отделите данные от презентации: if( ran === 0 ) { ... } else { ... }
 – 
JJJ
22 Дек 2016 в 10:52
1
К вашему сведению: Math.round(Math.random() * (1)) + 0; это просто Math.round(Math.random());
 – 
Jaromanda X
22 Дек 2016 в 10:53
2
$(image[ran]) тоже правильно. В этом случае вам не нужен .ContainerTwo, потому что вы очищаете его сразу после добавления изображения внутрь.
 – 
Fefux
22 Дек 2016 в 11:03
1
Нет причин добавлять изображение в контейнер, а затем немедленно удалять его - вероятно, даже не будет мерцать
 – 
Jaromanda X
22 Дек 2016 в 11:04

3 ответа

Попробуй это,

if($('.ContainerTwo').find('img').hasClass('hd'))
            {
                heads++;
                $('.spOne').html(heads);
                $('.ContainerTwo').empty();
            }
            else if($('.ContainerTwo').find('img').hasClass('tl'))
            {
                tails++;
                $('spTwo').html(tails);
                $('.ContainerTwo').empty();
            }
1
Prasad 22 Дек 2016 в 10:55

Вы можете проверить случайное значение переменной ran.

Я добавил некоторый рефакторинг кода и удалил ненужные переменные и переместил объявления переменных jQuery из цикла для повышения производительности.

Код:

$(document).ready(function () {
    $('#flip').on('click', function () {
        var heads = 0,
            tails = 0,
            numToFlip = parseInt($('#number').val().trim()),
            $spOne = $('.spOne'),
            $spTwo = $('spTwo');

        for (var x = 0; x < numToFlip; x++) {
            var ran = Math.round(Math.random() * (1)) + 0;
            (ran === 0) ? $spOne.html(++heads): $spTwo.html(++tails);
        }
    });
});

Обратите внимание, что была удалена переменная image, потому что вы делаете: $('.ContainerTwo').append(image[ran]);, а после этого вы делаете $('.ContainerTwo').empty();

1
Yosvel Quintero Arguelles 22 Дек 2016 в 11:46
2
Почему бы не if (ran === 0) ... else ... - не нужно else if - у вас есть голова или хвост, проверьте одно, если не то, то другое
 – 
Jaromanda X
22 Дек 2016 в 11:03
1
Было предложение @ JJJ в вопросе 12 минут назад: p
 – 
Jaromanda X
22 Дек 2016 в 11:05
Пока вы на нем, удалите $containerTwo.append(image[ran]); и два $containerTwo.empty(); ... лишние: p
 – 
Jaromanda X
22 Дек 2016 в 11:06
Связанных с $containerTwo.empty(); У меня были сомнения, потому что цикл повторяется до номера переменной numToFlip
 – 
Yosvel Quintero Arguelles
22 Дек 2016 в 11:17
1
Но на каждой итерации он добавляет изображение и сразу удаляет его
 – 
Jaromanda X
22 Дек 2016 в 11:19

Вы можете проверить, существует ли несколько классов, с помощью функции is(). Вы можете проверить весь свой класс .ContainerTwo с помощью each() и сравнить со своей собственной переменной. Попробуйте ниже

var containerTwo = $('.ContainerTwo img'); //All img in your element
containerTwo.each(function(i,e){           //Check all img in all containerTwo element in page
  if($(this).is('.hd, .tl')){              // If .hd or tl found
     console.log($(this).attr("class"))
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ContainerTwo">
  <img class="hd" src="http://img.freepik.com/icones-gratuites/instagram-logo_318-84939.jpg?size=338c&ext=jpg"/>
  <img class="tl" src="http://img.freepik.com/icones-gratuites/facebook-logo-bouton_318-84980.jpg?size=338c&ext=jpg"/>
<div>
<div class="ContainerTwo">
  <img class="hd" src="http://img.freepik.com/icones-gratuites/instagram-logo_318-84939.jpg?size=338c&ext=jpg"/>
  <img class="tl" src="http://img.freepik.com/icones-gratuites/facebook-logo-bouton_318-84980.jpg?size=338c&ext=jpg"/>
<div>
0
P. Frank 22 Дек 2016 в 11:54