![](/img/trans.png)
[英]Changing a CSS class depending on text wrap and window width (Jquery or JavaScript)
[英]Changing text and class with jquery
我整日忙於我正在從事的項目。 所有功能都在那里,我只是在使用jquery時遇到麻煩,有人可以幫我嗎?
這是應用程序的外觀:
很簡單,當我單擊“喜歡發布”時,通過ajax調用一個函數來運行數據庫計數的更新,當我按下“不喜歡”時也是如此
我的問題與JQuery有關,我似乎無法弄清楚如何做到這一點,因此,當單擊“贊帖子”時,將其更改為“已喜歡”,而將“已不喜歡”更改為“不喜歡”
CSS類:
"Like Post" = fa fa-thumbs-up like_btn
"Dislike Post" = fa fa-thumbs-down dislike_btn
"Already Liked" = fa fa-check like_btn
"Already Disliked" = fa fa-check fa-check-dislike dislike_btn"
這是當前的JQuery,我嘗試了一些不同的操作,但似乎沒有任何效果,任何建議我都非常感謝。
$('.fa-thumbs-up').click(function() {
var annid = $(this).attr('id');
update_likes(annid, 'like');
//code goes here
});
$('.fa-thumbs-down').click(function() {
var annid = $(this).attr('id');
update_likes(annid, 'dislike');
//code goes here
});
更新的JFIDDLE: http : //jsfiddle.net/T9wvL/2/
切換元素比交換文本更容易,因此我對HTML進行了一些修改。
http://jsfiddle.net/isherwood/T9wvL/8
.hide {
display: none;
}
<article>
<div class="updates updates-like">
<i class="fa fa-thumbs-up like_btn" id="like">
<span>Like Post</span>
<span class="hide">Already liked</span>
</i>
</div>
<div class="updates updates-dislike">
<i class="fa fa-thumbs-down dislike_btn" id="dislike">
<span>No Good</span>
<span class="hide">Already disliked</span>
</i>
</div>
</article>
$('.updates').click(function () {
$(this).find('i').toggleClass('fa-thumbs-up fa-thumbs-down')
.find('span').toggleClass('hide');
});
HTML:
<article>
<div class="updates-like">
<i class="fa fa-thumbs-up like_btn" id="<? echo $update->annid; ?>">
<span>Like Post </span>
</i>
</div>
<div class="updates-dislike">
<i class="fa fa-thumbs-down dislike_btn" id="<?echo $update->annid;?>">
<span>No Good</span>
</i>
</div>
</article>
JQuery的:
$('.like_btn').click(function () {
/*This here runs the update function on the DB.. Not Important
var annid = $(this).attr('id');
update_likes(annid, 'like');*/
//Code here to change "Like Post" to "already Liked" ON CLICK, and to change "already disliked" back to "No Good"
if ( $(this).hasClass('fa-thumbs-up') ) {
$(this).removeClass('fa-thumbs-up')
.addClass('fa-check')
.find('span')
.text('Already Liked');
if ( $('.dislike_btn').hasClass('fa-check fa-check-dislike') ) {
$('.dislike_btn').removeClass('fa-check fa-check-dislike')
.addClass('fa-thumbs-down')
.find('span')
.text('No Good');
}
}
return true;
});
$('.dislike_btn').click(function () {
/*This here runs the update function on the DB.. Not Important
var annid = $(this).attr('id');
update_likes(annid, 'dislike'); */
//Code here to change "No Good" to "already disliked" ON CLICK, and to change "already Liked" back to "No Like Post"
if ( $(this).hasClass('fa-thumbs-down') ) {
$(this).removeClass('fa-thumbs-down')
.addClass('fa-check fa-check-dislike')
.find('span')
.text('Already Disliked');
if ( $('.like_btn').hasClass('fa-check') ) {
$('.like_btn').removeClass('fa-check')
.addClass('fa-thumbs-up')
.find('span')
.text('Like Post');
}
}
return true;
});
這是應該滿足您需求的JSFiddle 。 我試圖優化您的代碼,但我希望它仍然能正常工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.