如何使用JQuery將樣式應用於正確的標記

我試圖向my code添加更多邏輯，但它不起作用。我必須圍繞span標籤包裹我的圖標，以便正確地獲得線條高度。我使用谷歌的字體：如何使用JQuery將樣式應用於正確的標記

html.erb

<!-- inside a loop --> 
<span class="wish-flex cursor" data-id="wish"> 
    <i class="material-icons cursor">favorite_border</i> Add Wishlist 
</span> 
<input type="hidden" class="wish-cls" value="<%= product.id %>" />

SCSS

... 

span.wish-flex{ 
    display: inline-flex; 
    vertical-align: middle; 
    padding-top: 10px 
} 

.material-icons.red { color: $hotRed; } 

span .material-icons{ 
    margin-top: -2px 
}

的JavaScript

$("[data-id=wish]").click(function(e){ 
    e.preventDefault(); 

    var value = $(this).next(".wish-cls").val(); 

    console.log("Clicked: " + value); 

    /* Applying the css when clicked 
    * 
    * We use toggleClass instead of addClass 
    * TODO: Ajax 
    */ 
    $(this).toggleClass("red"); 

});

的代碼將類red應用於跨度。正確，但如何讓它將class應用到i標籤？如果用戶點擊了心臟或單詞（添加心願單），腳本就會運行。

也許我可以更改css以獲得圖標和文本的內聯樣式並刪除span？

來源

2016-07-23 Sylar

'$（「i」，this）.toggleClass（「red」）;' –

@RajaprabhuAravindasamy謝謝！這很好。你可以參考一個答案或類似的鏈接？發佈你的答案。 – Sylar

在您的情況下，事件處理函數內部的this將指向span元素，但您試圖選擇的內容是其中的i元素。所以你必須使用find()或children()來調用$(this)來得到它。

$("[data-id='wish']").click(function(e){ 
    e.preventDefault(); 
    var value = $(this).next(".wish-cls").val(); 
    $("i", this).toggleClass("red"); 
});

這個簽名$("selector", elem)類似於$(elem).find("selector")。

來源

2016-07-23 20:12:45

如何使用JQuery將樣式應用於正確的標記

回答

相關問題