使用JS面向對象編程更改CSS

Question

我想通過OOP JS更改span的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 ，但是基本上您有兩種選擇：

1. 如果鼠標與之交互的元素與您要顯示/隱藏的元素之間存在某種類型的結構關系（父/子，同級，父母同級被刪除兩次，等等），那么您可以從$(this) （a jQuery包裝在與鼠標交互的元素周圍），並使用各種遍歷方法來查找要顯示/隱藏的元素。

   例如，為了爭辯說， blackSquare ， photo和originalContent都在帶有class 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'); } 

2. 如果沒有結構上的關系，則可以將要顯示/隱藏的元素的id存儲在鼠標與之交互的元素的data-*屬性中，然后通過$(this).attr("data-foo") （例如），並在顯示/隱藏選擇器中使用它們。 （或者，您可以使用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類名稱用於元素選擇，而樣式可以使用單獨的CSS類名稱。 這樣，您的功能選擇器就可以在樣式可能完全不同的不同場景中使用-我認為這是您想要實現的重用。