Question

我有一个非常简单的目标，我试图通过使用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');
});

Answer 1

一个例子。尝试使用'data-index'保留索引，并为'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');
});

你可以清理它并制作一个功能来处理'enter'和'leave'。刚举了一个例子。

Answer 2

您可以通过简单地将另一个类添加到与所单击的div对应的段落来实现此目的。您也可以按照以下方式简化绑定事件，而不是将事件分别绑定到每个div。

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

检查出来：demo

jQuery - 悬停功能覆盖了点击功能

2 个答案: