Операторы if else для проверки и проверки, добавлен ли определенный тег img к div, не будут выполняться

Question

Мне нужно проверить, есть ли у 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();
            }

        }


    })


})

javascript jquery

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

Answer 1

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

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

Answer 2

Вы можете проверить случайное значение переменной 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

Answer 3

Вы можете проверить, существует ли несколько классов, с помощью функции 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

Операторы if else для проверки и проверки, добавлен ли определенный тег img к div, не будут выполняться

3 ответа

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

Новые вопросы

javascript