titleの属性値を<i>に切り替える方法はありますか？フォントの驚くばかりのTitleTextをそのクラスに合わせて
テキストタイトルは<div class="postoption">
で<i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true">であり、私は以下に示すコードでそのタイトルのテキストおよびそのクラスを切り替えたいかのように：
$('.postoption').click(function(){
$(this).find('i').toggleClass('fa-star-o fa-star');
$(this).find('i').toggleTitle('Favorite This Post *OR* Remove Favorite')
});
あなたは、簡単な条件を使用してこの機能を実現することができますlike：
var target = $(this).find('i');
if(target.attr('title') == "Remove Favorite")
target.attr('title', "Favorite This Post");
else
target.attr('title', "Remove Favorite");
これが役に立ちます。
$('.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>使用attr()は、タイトルの値にアクセスし、それを切り替えます。
$('.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>私もそれを試しましたが、残念ながらそのことはありません –
どうしてですか？トグルクラスのタイトルを切り替えるだけで、それを条件文に入れます – bhansa
はい、今は正常です。ありがとう:) –
A無jQueryのソリューション
<!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>
はいそれは働きました。それは私が正確に欲しかったことです。ありがとうございました、ありがとうございました。私はtoggleTitleが無効であることを知っていますが、例えば、私はそれをより理解しやすくするために質問に回答しました。 –