конвертировать jQuery при наведении курсора - PullRequest
Новая
       54

конвертировать jQuery при наведении курсора

0 голосов
/ 19 марта 2020

У меня есть этот фрагмент jQuery, который меняет изображение, когда пользователь наводит курсор на определенную область (используя карту изображений).

Я хочу изменить его на функцию щелчка, но просто изменив "зависание" «щелкнуть» не работает.

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

jQuery: 

<script>
    $(document).ready(function() {
    //set off state 
    var nav_off = "images/PWRwheel/000.png";
    // functions for over and off
    function over(image) {
        $("#main-nav").attr("src", image);
    }
    function off() {
        $("#main-nav").attr("src", nav_off);
    }
    $("#imagemap area").hover(
        function () {
            var button = $(this).attr("id");
            over("images/PWRwheel/00" + button + ".png");
        },
        function () {
            off();
        });
    });
</script>

HTML: 

<map id="imagemap" name="imagemap">
    <area id="8" shape="circle" coords="203,106,52" href="#" />
    <area id="7" shape="circle" coords="99,207,52" href="#" />
    <area id="6" shape="circle" coords="100,349,52" href="#" />
    <area id="5" shape="circle" coords="200,459,52" href="#" />
    <area id="4" shape="circle" coords="353,459,52" href="#" />
    <area id="3" shape="circle" coords="454,350,52" href="#" />
    <area id="2" shape="circle" coords="456,209,52" href="#" />
    <area id="1" shape="circle" coords="352,103,52" href="#" />
</map>

Чтобы увидеть, как он функционирует в настоящее время, go здесь http://safespacetn.org/tools.html прокрутите вниз и нажмите одно из колесиков Domesti c для оценки насилия.

Ответы [ 2 ]

1 голос
/ 19 марта 2020

Если вы хотите использовать обработчик событий click, вы должны отключить вторую функцию от слушателя. Код будет выглядеть следующим образом. 

  $("#imagemap area").on('click', function() {
    console.log("hello")
    var button = $(this).attr("id");
    over("images/PWRwheel/00" + button + ".png");
  });
});

jsfiddle: https://jsfiddle.net/e7qxhgfy/2/

0 голосов
/ 19 марта 2020

Чтобы это работало с обработчиком click, вам нужно изменить лог c, чтобы новый src предоставлялся элементу на основе его текущего значения.

Также обратите внимание, что при Ваши функции over() и off() являются оболочками для одной строки кода, они почти полностью избыточны и могут быть удалены. Попробуйте это: 

jQuery(function($) {
  let $nav = $('#main-nav');
  let defaultSrc = 'images/PWRwheel/000.png';

  $("#imagemap area").on('click', function() {
    let src = $nav.attr('src') == defaultSrc ? "images/PWRwheel/00" + this.id + ".png" : defaultSrc;
    $("#main-nav").attr("src", src);
  });
});
...