用 JS 面向对象编程改变 CSS答案

【问题标题】：Changing CSS with JS Object Orientated Programming用 JS 面向对象编程改变 CSS
【发布时间】：2014-06-05 06:45:27
【问题描述】：

我想通过 OOP JS 改变 spans 的 CSS 值。

鼠标悬停在一张照片上，文字主体发生“变化”，即一个跨度消失，另一个出现。

$(Document).ready(function(){
    $('#blackSquare').mouseenter(function(){
        $('#originalContent').css('display', 'none');
        $('#photo').css('display', 'table-cell');
    });
    $('#blackSquare').mouseleave(function(){
        $('#photo').css('display', 'none');
        $('#originalContent').css('display', 'table-cell');
    });
});

我需要为每个我想要影响 css 的对象执行上述代码。有没有一种简单的 OOP 方法可以做到这一点？

【问题讨论】：

OOP JS 是什么意思
@AhsanShah：OOP JS 有什么不清楚的地方？使用面向对象技术的 JavaScript。

标签： javascript jquery html css oop

【解决方案1】：

没有那么多OOP，但基本上你有两个选择：

如果鼠标正在与之交互的元素与您想要显示/隐藏的元素（父/子、兄弟、父的兄弟两次删除等等）之间存在任何类型的结构关系，那么您从 $(this) 开始（鼠标正在与之交互的元素周围的 jQuery 包装器）并使用 various traversal methods 找到您想要显示/隐藏的元素。

例如，为了论证的目的，假设blackSquare、photo 和originalContent 都在类container 的容器中。假设photo 和originalContent 是类，而不是ids。那么：
```
$('#blackSquare').mouseenter(toggleContent.bind(undefined, true));
$('#blackSquare').mouseleave(toggleContent.bind(undefined, false));
function toggleContent(flag) {
    var container = $(this).closest('.container');
    container.find('.originalContent').css('display', flag ? 'none' : 'table-cell');
    container.find('.photo').css('display', flag ? 'table-cell' : 'none');
}
```
如果没有结构关系，您可以将要显示/隐藏的元素的ids 存储在鼠标与之交互的元素的data-* 属性中，然后通过$(this).attr("data-foo") 获取这些值（例如示例）并在您的显示/隐藏选择器中使用它们。（或者您可以使用data，但如果您所做的只是读取data-* 属性，则data 是多余的。）例如，在您的示例代码中，您将存储ids @987654338 @ 和 originalContent 在 blackSquare 元素上。例如：
```
$('#blackSquare').mouseenter(toggleContent.bind(undefined, true));
$('#blackSquare').mouseleave(toggleContent.bind(undefined, false));
function toggleContent(flag) {
    var $this = $(this),
        photoId = $this.attr("data-photo-id"),
        contentId = $this.attr("data-original-content-id");
    $('#' + photoId).css('display', flag ? 'none' : 'table-cell');
    $('#' + contentId).css('display', flag ? 'table-cell' : 'none');
}
```

【讨论】：

【解决方案2】：

您在这里的基本 jQuery 方法很好，您不需要 OOP 方法来执行此操作。只需使用类选择器而不是 ID 选择器，相同的代码将涵盖所有实例：例如您可以将其更改为更灵活：

$(document).ready(function(){
  $('.photo-area').mouseenter(function(){
    $(this).find('.content').css('display', 'none');
    $(this).find('.photo').css('display', 'table-cell');
  });
  $('.photo-area').mouseleave(function(){
    $(this).find('.photo').css('display', 'none');
    $(this).find('.content').css('display', 'table-cell');
  });
});

请注意，您可以拥有纯粹用作 jQuery 选择器的类，即没有与之关联的 CSS 规则。由于您可以为一个元素分配多个 CSS 类，因此您可以使用“功能性”CSS 类名称来选择元素，并为样式设置单独的名称。这样，您的功能选择器可以在样式可能完全不同的不同场景中使用 - 我认为这是您想要实现的重用。

【讨论】：