使用JQuery來包裝，並根據該子圖像元素具有

Question

使用JQuery來包裝，並根據該子圖像元素具有

當類型類的附加替代HTML內容的類型類的附加替代HTML內容圖片在WordPress文章的左側或右側居中或浮動，核心WordPress文件添加類名稱，如aligncenter，alignleft或alignright到img標籤。這樣可以使用css將圖像向左或向右浮動或將其保持在中心，具體取決於管理員選擇的內容。

我已經選擇包裝我的帖子圖片，詳情如下，當我將鼠標懸停在整個圖片上時，提供一個有趣的翻轉效果。

alignleft和alignright類隨後對圖像不做任何處理，因爲圖像html元素現在優先於圖像的樣式並且沒有浮動。我想要做的是使用JQuery向圖形圖像添加一個類，具體取決於對齊類在子元素即圖像上的位置。

有沒有人有什麼建議我能做些什麼來使這個腳本工作？這裏是最終的html代碼

<a href="http://www.jonathanbeech.dev/wp-content/uploads/2014/01/ACF-flexible-content-page.jpg" class="prettyPhoto" rel="prettyPhoto[gallery]"> 
    <figure class="fignoFloat"> 
     <div class="overlayArticle"> 
     <img class="wp-image-509 aligncenter" alt="ACF flexible content page" src="http://www.jonathanbeech.dev/wp-content/uploads/2014/01/ACF-flexible-content-page-420x350.jpg" class="prettyPhoto"> 
     <span></span> 
     </div> 
    </figure> 
    </a> 

我用jQuery的原包裝和HTML代碼添加到如下的IMG工作正常：

jQuery(function ($) { 
    $(".entry a.prettyPhoto img").wrap('<figure class="fignoFloat"><div class="overlayArticle"></div></figure>'); 
    $(".overlayArticle").append('<span></span>') 
}); 

我嘗試了條件語句（見下文），但這失敗了嗎？

$(function() { 
    if ($(".entry a.prettyPhoto img").hasClass("aligncenter")) { 
     $(".entry a.prettyPhoto img").wrap('<figure class="fignoFloat"><div class="overlayArticle"></div></figure>'); 
     $(".overlayArticle").append('<span></span>'); 
    } 
    else if ($(".entry a.prettyPhoto img").hasClass("alignleft")) { 
     $(".entry a.prettyPhoto img").wrap('<figure><div class="overlayArticle"></div></figure>'); 
     $(".overlayArticle").append('<span></span>'); 
    } 
}); 

Answer 1

試試這個：當alignleft類用於圖像的改變不支持HTML代碼應用

$(".entry a.prettyPhoto img").each(function() { 
    var self = $(this); 
    if (self.hasClass("aligncenter")) { 
     self.wrap('<figure class="fignoFloat"><div class="overlayArticle"></div></figure>'); 
     self.closest('.overlayArticle').append('<span></span>'); 
    } 
    else if (self.hasClass("alignleft")) { 
     self.wrap('<figure><div class="overlayArticle"></div></figure>'); 
     self.closest('.overlayArticle').append('<span></span>'); 
    } 

}); 

這將通過所有prettyPhoto圖像的迭代，並檢查車況每張照片和應用無論需要什麼。

您以前的代碼沒有運行，因爲$(".entry a.prettyPhoto img")將選擇與類alignCenter和alignleft的所有img。如果任何img沒有對齊中心，則它將返回false，而對於左邊的則會返回相同的值。所以，你的if語句不運行，因爲有在prettyPhoto圖像

aligncenter和alignleft元素其實更好的辦法是

$(".entry a.prettyPhoto img.aligncenter").wrap('<figure class="fignoFloat"><div class="overlayArticle"></div></figure>'); 
$(".entry a.prettyPhoto img.alignleft").wrap('<figure><div class="overlayArticle"></div></figure>'); 

$(".entry a.prettyPhoto .overlayArticle").append('<span></span>'); 

目標aligncenter的，其包裝既，目標在alignleft的人，然後把它包。最後將span擴展到所有prettyPhoto，假設prettyphoto會始終有aligncenter或alignleft類