时间戳

首页 > 解决方案 > 根据函数的返回值动态改变div的背景

javascript - 根据函数的返回值动态改变div的背景

问题描述

这是功能

function getColor() {

  var color = '';

    $('.animated-teaser.cold').hover(
    function() {
      $(this).addClass('active');
      color = 'coldest';
      return color;
    },
    function() {
      $(this).removeClass('active');
      color = '';
      return color;
    }
  );

  $('.animated-teaser.warm').hover(
    function() {
     $(this).addClass('active');
      color = 'warmest';
      return color;
    },
    function() {
      $(this).removeClass('active');
      color = '';
      return color;
    }
  );
}

然后我叫它

$('.area').css('background-color', getColor());

我看到它的功能有效，但结果不影响“.area”元素。

我不想向“.area”元素添加事件！

这是jsfiddle

标签： javascriptjquery

解决方案

正如我在评论中所说，该getColor函数将悬停侦听器附加到 DOM 元素。这就是它所做的一切。它不返回颜色。目前，您期望此函数从尚未发生的未来事件（用户悬停元素）中​​返回颜色。逻辑有问题，你需要重新考虑一下。首先，附加悬停的侦听器。然后，在悬停时，更改区域颜色。

const $area = $('.area'),
  $cold = $('.animated-teaser.cold'),
  $warm = $('.animated-teaser.warm');

$cold.hover(function() {
  $cold.addClass('active');
  changeAreaColor('coldest');
}, function() {
  $cold.removeClass('active');
  changeAreaColor('');
});

$warm.hover(function() {
  $warm.addClass('active');
  changeAreaColor('warmest');
}, function() {
  $warm.removeClass('active');
  changeAreaColor('');
});
}

function changeAreaColor(color) {
  $area.css('background-color', color)
}

话虽这么说，这"warmest"是一个无效的 CSS 颜色，所以它不会做任何事情。将其更改为“深红色”或官方的东西。

推荐阅读