jQuery - hover function is overriding click function

Question

I have a very simple objective that I'm trying to accomplish with the use of jQuery. I have 6 "trigger" divs that add "selected" classes to corresponding paragraphs. It's currently set up and working so that when you hover over div 1, paragraph 1 gets a class toggled. I want to take this further so that if you actually CLICK div 1, the "selected" class persists on the paragraph until you either click another trigger div or click elsewhere on the document.

Here's a Codepen showing what I have now: http://codepen.io/trevanhetzel/pen/yKnAf

And here's the code:

<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');
});

Answer 1

You can do this by simply adding another class to paragraph corresponding the clicked div. Also you can simplify binding events as following instead of binding event to each div sepaperately.

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

Check this out: demo

Answer 2

An example. Try to keep index with 'data-index', and add/remove a class for 'selected'.

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');
});

You can maybe clean-it up more and make one function to handle 'enter' and 'leave'. Just gave an example.