Question

我想通过OOP JS更改跨度的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方式吗？

Answer 1

与 OOP 不同，但基本上你有两个选择：

如果鼠标与之交互的元素与你想要显示/隐藏的元素之间存在任何结构关系（父母/子女，兄弟姐妹，父母的兄弟姐妹两次被移除，无论如何），那么你开始$(this)（围绕鼠标与之交互的元素的jQuery包装器）并使用various traversal methods查找要显示/隐藏的元素。

例如，为了论证，blackSquare，photo和originalContent都在类container的容器中。我们还要说photo和originalContent是类而不是id。然后：
```
$('#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');
}
```
如果没有结构关系，您可以存储元素的id个以显示/隐藏鼠标与之交互的元素的data-*属性，然后获取那些vaules通过$(this).attr("data-foo")（例如）并使用show / hide选择器中的那些。（或者你可以使用data，但如果你所做的只是阅读data-*属性，那么data就是矫枉过正。）所以在你的示例代码中，你可以存储id元素上的photo 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');
}
```

Answer 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类名称进行元素选择，并为样式分别设置。这样，您的功能选择器可以在不同的场景中使用，其中样式可能完全不同 - 我认为这是您想要实现的重用。

用JS面向对象编程改变CSS

2 个答案: