jQuery和此作用域的範圍

我錯過了這個函數的作用域，我有一個cms自動將類添加到圖像中，但不會改變它們的對齊方式，所以文本不能正確地圍繞它們。我不能簡單地使用$（「img」）。attr（「align」，「left」）;因爲這會改變頁面上的所有圖像，即使用上下文''img'，'這'不是像我認爲的那樣工作，並且完全沒有任何作用。jQuery和此作用域的範圍

function align_image(){ 
    console.log("func called"); 
    if($("img").length){ 
     if($("img").hasClass("alignleft")){ 
      $("img", this).attr("align","left"); 
      console.log("aligned left!") 
    } 

     if($("img").hasClass("alignright")){ 
      $("img", this).attr("align","right"); 
      console.log("aligned right!"); 
     } 
    } 
} 
align_image();

有沒有人知道我可以如何改變每個img以便與其關聯的類對齊？爲什麼它工作的獎金點。

編輯：codepen演示

來源

2017-05-13 Brendan Jackson

問題沒有改變圖像校準，它工作正常，無「本」的問題，使用「this」我現在的方式不會選擇任何內容，如果我不使用「this」，它會選擇頁面上的每個圖像標記並重新對其進行重新對齊。所以如果我有50個img標籤，它們將全部對齊，無論發現最後一個標籤的方式是什麼。 –

您可以使用類標識符來添加像$（'img.alignleft'）這樣的attr（'align'，'left'）;而對於類似於 – rajthakur

我想你可以通過每個圖像的迭代和迭代器功能是指在img DOM元素與「此」參考。事情是這樣的：

function align_image(){ 
 
    console.log("func called"); 
 
    if ($(this).hasClass('alignleft')) { 
 
     $(this).attr("align","left"); 
 
    } 
 

 
    if ($(this).hasClass('alignright')) { 
 
     $(this).attr("align","right"); 
 
    } 
 
} 
 

 
$('img').each(align_image);

正如評論（以及其他答案）建議，您還可以使用特定的jQuery選擇來完成相同的：

$('img.alignleft').attr("align","left"); 
 
$('img.alignright').attr("align","right");

最後，根據w3schools，我不建議使用mg align屬性，而應該使用CSS屬性。像這樣的東西應該工作：

img.alignleft { 
 
    float: left; 
 
} 
 

 
img.alignright { 
 
    float: right; 
 
}

我希望這捕獲所有的角度。

來源

2017-05-13 04:31:24 pacifier21

這將迭代所有圖像，並檢查每個類的類。如果你想要一些快捷方式，你可以這樣做： $（'img.alignleft'）。attr（「align」，「left」）and $（'img.alignright'）。attr（「align」，「對」）。這將使用alignX類設置所有img標籤上的align屬性。當然，這也可以用CSS樣式表完成，對嗎？ – pacifier21

以前從未見過這種方法，但它的工作原理！謝謝！ –

太棒了！我很高興它的工作原理！附註：我實際上會建議使用我評論中建議的選擇器。答案中列出的方法與您的原始邏輯更接近。選擇器提供了一種更加簡潔的用單個函數調用處理多個DOM元素的方法，我相信這是jQuery最大的優勢之一。祝你好運！ – pacifier21

試試這個。我認爲它有幫助你

function align_image(){ 
    console.log("func called"); 
    if ($('img').hasClass('alignleft')) { 
    $(this).attr("align","left"); 
    } 

    if ($('img').hasClass('alignright')) { 
    $(this).attr("align","right"); 
    } 
} 
align_image();

來源

2017-05-13 04:20:51

的alignright類，這是我嘗試的第一件事，我認爲它會選擇當前正在偵聽的圖像並對其進行更改。在這種情況下，它似乎不知道「這個」是什麼。 –

你能否提供演示，然後我可以幫助你。 –

我會盡快得到一個 –

您更好地使用過濾器的方法來找到你的元素，並添加生成的attr這樣的：

$("img").filter('.align-right').attr("align","right") ;       
$("img").filter('.align-left').attr("align","left") ;

See here

來源

2017-05-13 04:44:23

jQuery和此作用域的範圍

回答

相關問題