Включите функцию JavaScript при нажатии на изображение в HTML-Div

Question

Включите функцию JavaScript при нажатии на изображение в HTML-Div

0

У меня есть div, который содержит изображение:

<div class="HD">
    <img class="image1"src="img/myimage.png">
</div>

применяемый к нему CSS:

.HD img {
    position:absolute;
    top:570px;
    left:1120px;
    width:30px;
    height:90px;
    cursor:pointer
}

Я хочу применить функцию щелчка к изображению внутри div. Однако, когда я даю идентификатор изображения или класс и использую его для создания функции, javascript не срабатывает. Когда у div нет изображения, и я использую класс, javascript работает так, как ожидалось. Ниже приведена функция Javascript:

$(".HD").click(function () {
    if($('.UpperDiv').attr('data-visible') == "hidden") {
        $('.UpperDiv').attr('data-visible', 'visible');
        $('.UpperDiv').animate({
            opacity:1
            // top:'250px'
        });
    } else {
        $('.UpperDiv').attr('data-visible','hidden');
        $('.UpperDiv').animate({
            opacity:0
            // top:'250px'
        });
    }
});

Что может быть причиной? Что не так с моим кодом?
Как я могу запустить javascript, когда пользователь нажимает на div, содержащий изображение?

Для справки, это веб-сайт, который я пытаюсь сделать, и оригинальную рабочую версию.

Nodnin 02 дек. 2013, в 05:14

Источник

0

Не могли бы вы предоставить JSFiddle?
jameslafferty 02 дек. 2013, в 03:35
0

Я не использовал jsfiddle .. Я пытаюсь создать один .. это будет полезно, если я сделал
Nodnin 02 дек. 2013, в 04:12
0

Да, определенно было бы полезно ответить на ваш вопрос.
jameslafferty 02 дек. 2013, в 04:47

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

3 ответа

2

Вы не можете использовать .toggle?

$(".HD").toggle(400);

Или .fadeToggle?

$(".HD").fadeToggle();

maček 02 дек. 2013, в 00:52

0

Извините, я не смог понять ваш ответ ... почему вы предложили переключение ... переключится ли переключение между двумя делениями ... но текущая проблема заключается в том, что ничего не происходит при щелчке ..
Nodnin 02 дек. 2013, в 04:11

1

$(".HD > img").click(function () { });

Используйте это и попробуйте.

Abhisek 02 дек. 2013, в 06:01

Ещё вопросы

Не могли бы вы предоставить JSFiddle?
Я не использовал jsfiddle .. Я пытаюсь создать один .. это будет полезно, если я сделал
Да, определенно было бы полезно ответить на ваш вопрос.
Извините, я не смог понять ваш ответ ... почему вы предложили переключение ... переключится ли переключение между двумя делениями ... но текущая проблема заключается в том, что ничего не происходит при щелчке ..

jameslafferty · Accepted Answer · 2013-12-02T02-04-00.000Z

Пытаться:

$(".HD").on({
    click : function(){
        if($('.UpperDiv').attr('data-visible')=="hidden")
        {
                $('.UpperDiv').attr('data-visible','visible');
                $('.UpperDiv').animate({
                        opacity:1
                        // top:'250px'
                });
        }else{
                $('.UpperDiv').attr('data-visible','hidden');
                $('.UpperDiv').animate({
                        opacity:0
                        // top:'250px'
                });
        }
    }
}, 'img');

Есть ли способ, которым мы могли бы применить класс изображения или идентификатор изображения и по щелчку этого огня Javascript .. Спасибо за ответ, хотя он предоставляет полезные предложения