jQuery - функция наведения переопределяет функцию щелчка

У меня есть очень простая цель, которую я пытаюсь выполнить с помощью jQuery. У меня есть 6 «триггерных» div, которые добавляют «выбранные» классы в соответствующие абзацы. В настоящее время он настроен и работает так, что при наведении курсора на div 1 класс paragraph 1 переключается. Я хочу пойти дальше, чтобы, если вы действительно НАЖМЕТЕ div 1, «выбранный» класс сохранялся в абзаце до тех пор, пока вы не щелкнете другой триггерный элемент div или не щелкнете в другом месте документа.

Вот Codepen, показывающий, что у меня есть сейчас: http://codepen.io/trevanhetzel/pen/yKnAf

И вот код:

<div class="triggers">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
  <div class="five"></div>
  <div class="six"></div>
</div>

<div class="paragraphs">
  <p class="one"></p>
  <p class="two"></p>
  <p class="three"></p>
  <p class="four"></p>
  <p class="five"></p>
  <p class="six"></p>
</div>

// The goal is to toggle the selected class when you hover over a trigger, BUT if you click on a trigger it will not just toggle the class, but add it so it's "stuck" until you either click out of the .paragraphs containing div or click on another trigger. Right now, I think the hover functions are overriding the click functions....also I need to minimize all these stupid functions to keep it DRY...

// Toggle selected class when hovering the triggers
$('.triggers .one').hover(function() {
  $('.paragraphs p.one').toggleClass('selected');
});

$('.triggers .two').hover(function() {
  $('.paragraphs p.two').toggleClass('selected');
});

$('.triggers .three').hover(function() {
  $('.paragraphs p.three').toggleClass('selected');
});

$('.triggers .four').hover(function() {
  $('.paragraphs p.four').toggleClass('selected');
});

$('.triggers .five').hover(function() {
  $('.paragraphs p.five').toggleClass('selected');
});

$('.triggers .six').hover(function() {
  $('.paragraphs p.six').toggleClass('selected');
});

// Add the selected class when clicking a trigger
$('.triggers .one').click(function() {
  $('.paragaphs p').removeClass('selected');
  $('.paragraphs p.one').addClass('selected');
});

$('.triggers .two').click(function() {
  $('.paragaphs p').removeClass('selected');
  $('.paragraphs p.two').addClass('selected');
});

$('.triggers .three').click(function() {
  $('.paragaphs p').removeClass('selected');
  $('.paragraphs p.three').addClass('selected');
});

$('.triggers .four').click(function() {
  $('.paragaphs p').removeClass('selected');
  $('.paragraphs p.four').addClass('selected');
});

$('.triggers .five').click(function() {
  $('.paragaphs p').removeClass('selected');
  $('.paragraphs p.five').addClass('selected');
});

$('.triggers .six').click(function() {
  $('.paragaphs p').removeClass('selected');
  $('.paragraphs p.six').addClass('selected');
});

function click jquery toggleclass
person Trevan Hetzel    schedule 29.06.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете сделать это, просто добавив еще один класс в абзац, соответствующий нажатому div. Также вы можете упростить события привязки, как показано ниже, вместо привязки события к каждому div отдельно.

$('.triggers div').hover(function() {
  $('.paragraphs p.'+$(this).attr('class')).toggleClass('selected');
});

Посмотрите это: демонстрация

person Harish Anchu    schedule 29.06.2013

arrow_upward
1
arrow_downward

Пример. Попробуйте сохранить индекс с «индексом данных» и добавить/удалить класс для «выбранного».

http://codepen.io/anon/pen/lzpCf

$('.triggers div')
.hover(function () {    // on enter...
        var thisIndex = $(this).data('index')
        isClicked = $(this).hasClass('clicked');

        if (!isClicked) {
            $('.paragraphs p[data-index=' + thisIndex + ']').addClass('selected');
        }
    },
    function () {    // on leave...
        var thisIndex = $(this).data('index');
        isClicked = $(this).hasClass('clicked');

        if (!isClicked) {
            $('.paragraphs p[data-index=' + thisIndex + ']').removeClass('selected');
        }
    })
.click(function () {    // on click...
    $(this).toggleClass('clicked');
});

Возможно, вы можете почистить его и сделать одну функцию для обработки «входа» и «выхода». Просто привел пример.

person AntouanK    schedule 29.06.2013