Изменение текста и класса с помощью jquery

Question

Изменение текста и класса с помощью jquery

0

Я весь день работаю над проектом, над которым я работаю. Вся funcitonality есть, у меня просто проблемы с 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/

tcornell05 30 апр. 2014, в 03:40

Источник

0

Можете ли вы создать JSFiddle с тем, что у вас есть в настоящее время, не зная разметки (html), с которой трудно помочь.
Neaox 30 апр. 2014, в 01:32
0

Можете ли вы объяснить, что вы пытались? Потому что это может указать, где проблема может быть.
Troveldom 30 апр. 2014, в 01:33
0

Я прошу прощения за отсутствие конкретики, я собрал небольшую скрипку, чтобы, надеюсь, немного подробнее объяснить мою проблему, спасибо!
tcornell05 30 апр. 2014, в 02:21
0

jsfiddle.net/T9wvL/2
tcornell05 30 апр. 2014, в 02:22

Показать ещё 2 комментария

Теги:

javascript

jquery

2 ответа

1

Легче переключать элементы, чем менять текст, поэтому я немного изменил ваш 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');
});

isherwood 30 апр. 2014, в 01:12

0

Обновлено с целыми работами.
isherwood 30 апр. 2014, в 02:36
0

Обновлен снова с исправлением логики.
isherwood 30 апр. 2014, в 02:38
0

спасибо isherwood за альтернативный метод. Я еду домой и немного подправлю, я действительно ценю это. единственное, когда подобное переключается на «уже понравившееся», другое должно быть отключено. поэтому, когда уже понравилось, нужно включить «ничего хорошего», и наоборот.
tcornell05 30 апр. 2014, в 02:50

Показать ещё 1 комментарий

Ещё вопросы

Можете ли вы создать JSFiddle с тем, что у вас есть в настоящее время, не зная разметки (html), с которой трудно помочь.
Можете ли вы объяснить, что вы пытались? Потому что это может указать, где проблема может быть.
Я прошу прощения за отсутствие конкретики, я собрал небольшую скрипку, чтобы, надеюсь, немного подробнее объяснить мою проблему, спасибо!
Обновлен снова с исправлением логики.
спасибо isherwood за альтернативный метод. Я еду домой и немного подправлю, я действительно ценю это. единственное, когда подобное переключается на «уже понравившееся», другое должно быть отключено. поэтому, когда уже понравилось, нужно включить «ничего хорошего», и наоборот.

bulanmaster · Accepted Answer · 2014-04-30T18-45-00.000Z

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, который должен работать для того, что вам нужно. Я попытался немного оптимизировать ваш код, но я надеюсь, что он все еще работает нормально.

Именно то, что мне было нужно, спасибо!