JQuery - нажмите функциональность - небольшая проблема

Question

У меня короткий вопрос, пожалуйста:)

У меня есть скрипт, где я делаю 5 изображений видимыми.Пользователь контролирует порядок, в котором он щелкает изображения.

Итак, что я пытаюсь сделать: если щелкнуть последнее изображение, должен отображаться div.

Как работает jQueryзнает, нажали ли на 5-м изображении?

Остальное (добавление в div) я уже понял.

Не могли бы вы быть таким добрым и дать мне небольшой намек на это?:)

Answer 1

Если вы сделаете, чтобы ваш обработчик кликов добавлял класс при нажатии на изображение.

$(this).addClass("hasBeenClicked");

, тогда вы можете проверить количество кликнувших изображений таким образом

if ($("img.hasBeenClicked").length === 5) { alert("All 5 have been clicked"); }

Чтобы разбить егоdown,

img.hasBeenClicked

- это синтаксис селектора CSS для «всех элементов <IMG>, которые имеют класс hasBeenClicked».Вы можете проверить это, добавив CSS <style>img.hasBeenClicked { border: 4px solid red }</style> в ваш HTML и увидев, что получает жирную красную рамку.

$("img.hasBeenClicked")

затем просто вызывает оператор запроса jQuery, $, чтобы получить массив<IMG> элементы, которые имеют этот класс.

$("img.hasBeenClicked").length

использует свойство array .length, чтобы получить количество <IMG> элементов с этим классом.

$(this).addClass("hasBeenClicked");

простобухгалтерский учет, который помещает класс hasBeenClicked на изображения при нажатии.Он не будет пересчитываться, так как независимо от того, сколько раз щелкнуло одно изображение, оно будет учитываться только один раз в массиве узлов, возвращаемых $.

Answer 2

Скажем, один из ваших div'ов объявлен так:

<div id="div5">
<!-- img tag -->
</div>

Тогда вы можете сказать $('#div5').click(function(){ $('#div5').show(); });

Answer 3

Вы можете использовать $('.myImages').is(":visible") для проверки всех изображений.

Вот документы jquery для .is () .

Это может выглядеть что-то вот так (не совсем, я думаю):

var allVisible = true;

$.each($('.myImages'), function(index, value){
    if( $(value).is(":visible") && allVisible )
    {
        //that's nifty, move on
        continue;
    }
    else
    {
        allVisible = false;
    }
});

if( allVisible )
{
    $('#myDiv').show();
}