Toggle Font Awesome TitleText zusammen mit seiner Klasse

Gibt es eine Möglichkeit, den title Attributwert von <i> umzuschalten?Toggle Font Awesome TitleText zusammen mit seiner Klasse

Als ob Text Titel ist <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true"> in <div class="postoption">

Und ich will seinen Titeltext und seine Klasse mit dem Code gegeben hin- und herzuschalten unter:

$('.postoption').click(function(){ 
    $(this).find('i').toggleClass('fa-star-o fa-star'); 
    $(this).find('i').toggleTitle('Favorite This Post *OR* Remove Favorite') 
});

Quelle

2017-11-10 Javed Khan

Sie diese Funktionalität mit einem einfachen Zustand erreichen kann, wie:

var target = $(this).find('i'); 

if(target.attr('title') == "Remove Favorite") 
    target.attr('title', "Favorite This Post"); 
else 
    target.attr('title', "Remove Favorite");

Hoffnung, das hilft.

$('.postoption').click(function() { 
 
    $(this).find('i').toggleClass('fa-star-o fa-star'); 
 

 
    var target = $(this).find('i'); 
 

 
    if (target.attr('title') == "Remove Favorite") 
 
    target.attr('title', "Favorite This Post"); 
 
    else 
 
    target.attr('title', "Remove Favorite"); 
 
});

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="postoption"> 
 
    <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true"></i> 
 
</div>

Quelle

2017-11-10 18:15:54

Ja Es funktionierte. Genau das wollte ich. Danke Sir, und ja Sir ich weiß, dass toggleTitle ungültig ist, aber nur zum Beispiel habe ich es in Frage gestellt, um es klarer zu machen zu verstehen –

Verwenden attr() den Titel Wert zuzugreifen und dann Toggle es.

$('.postoption').click(function() { 
 
    $(this).find('i').toggleClass('fa-star-o fa-star'); 
 
    var title = $(this).find('i'); 
 
//just check the value of title and toggle the value 
 
console.log(title.attr("title")); 
 
if(title.attr("title") === "Favorite This Post"){ 
 
    title.attr("title", "Remove This Post"); 
 
} 
 
else{ 
 
    title.attr("title", "Favorite This Post"); 
 
} 
 

 
});

.postoption{ 
 
    background: #ccc; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="postoption"> 
 
    <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true">Icon</i> 
 
</div>

Quelle

2017-11-10 18:18:03 bhansa

Ich habe es auch versucht, aber leider funktioniert es nicht –

Warum nicht? Es schaltet den Titel ein, für die Klasse toggle auch einfach in die Bedingungen – bhansa

Ja, es funktioniert jetzt gut. Vielen Dank :) –

A No-Jquery Lösung

<!DOCTYPE html> 
<html> 
<body> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<meta name="author" content=""> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<i id='iTag' class="red" title="Favorite This Post"></i> 
<button id="toggleButton" type="button"> Toggle title</button> 

<script type="text/javascript"> 

document.getElementById('toggleButton').onclick = function(){ 
    var iTag = document.getElementById('iTag'), 
     iTagTitle = iTag.getAttribute('title'); 

    if(iTagTitle == 'Favorite This Post') { 
     iTag.setAttribute('title','Remove This Post');  
    } 
    else { 
     iTag.setAttribute('title','Favorite This Post');   
    } 
}; 

</script> 
</body> 
</html>

Quelle

2017-11-10 18:32:01

Toggle Font Awesome TitleText zusammen mit seiner Klasse

Antwort

Verwandte Themen