Изменение цвета при клике и обратно

@Shoshona · Регистрация: 03.06.2014

Студворк — интернет-сервис помощи студентам

подскажите простенький код.
пробую

JavaScript
1
2
3
4
5
 $(".wpfp-link").on("click", function() {
        $(".fa-heart").css('color') === '#f71e1e' ? 
        $(".fa-heart").css('color', '#333333') : 
        $(".fa-heart").css('color', '#f71e1e');
    });

не получаеться

@Уф · 28.03.2017, 15:23

тернарный оператор возвращает значение, а не выполняет команды

JavaScript
1
 $(".fa-heart").css('color', $(".fa-heart").css('color') === '#f71e1e' ? '#333333' : '#f71e1e');

@Shoshona · 28.03.2017, 17:27 **[ТС]**

Уф, Спасибо...
Я знаю что не по правилам, но не могли бы вы еще помочь

JavaScript
1
2
3
4
5
6
7
  $(document).ready(function(){
$(".wpfp-link").on("click", function() {
 if($(".wpfp-link").attr("title")=="Добавить в избранное") $(".fa-heart").css({color : "#f71e1e"});
            else 
        $(".fa-heart").css({color : "#333333"});
    });
  });

почему-то не работает этот скрипт, вернее красный цвет он включает, и все потом сколько не нажимай ничего не меняет. Как это исправить?

Добавлено через 2 минуты
Уф, P.S. скрипт после объекта стоит

Добавлено через 1 час 47 минут
Блин, я уже все перепробовал - ничего не получаеться(

@fanatikus · 28.03.2017, 20:31

я не очень понял, что вам нужно.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <script type="text/javascript">
        $(document).ready(function () {
            $(".wpfp-link").on("click", function (e) { 
                e.preventDefault();
                if ($(this).attr("title") === "Добавить в избранное") {
                    $(".fa-heart").css({color: "#FF3300"});
                } else {
                    $(".fa-heart").css({color: "#00FF66"});
                }
            });
        });
    </script>
 
    <p class="fa-heart">test</p>
    <a class="wpfp-link" href="" title="Добавить в избранное">изменить цвет</a>

этот код работает

@Shoshona · 29.03.2017, 09:11 **[ТС]**

fanatikus, при клике на

HTML5
1
<a class="wpfp-link" href="" title="Добавить в избранное">изменить цвет</a>

title меняется - Добавить в избранное - Удалить с избранного - ... после этого, мне нужно чтобы цвет менятся в зависимости от title.
Я ставил свой скрипт ниже скрипта для изменения названия, но он работает только раз - до перезагрузки страницы ничего не измениться.

@Уф · 29.03.2017, 11:13

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
$(".wpfp-link").on("click", function() {
  if($(this).attr("title")=="Добавить в избранное") {
     $(".fa-heart").css({color : "#f71e1e"});
     $(this).attr("title","Удалить из избранного");
  } else  {
     $(".fa-heart").css({color : "#333333"});
     $(this).attr("title","Добавить в избранное");
  }
});
});

@Shoshona · 29.03.2017, 11:41 **[ТС]**

Уф, не работает.
Скрипт нужно ставить после ссылки?

@Уф · 29.03.2017, 11:47

пофиг где, хтмл лучше весь напиши, а то не понятно какой блок ты хочешь менять и где он распологается

@Shoshona · 29.03.2017, 12:07 **[ТС]**

Уф,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <script type="text/javascript">
 $(document).ready(function(){
            if($(".wpfp-link").attr("title")=="Добавить в избранное") $(".fa-heart").css({color : "#333333"});
            else 
        $(".fa-heart").css({color : "#f71e1e"});
    });
</script>
...
<i class="fa fa-heart" aria-hidden="true"></i>
<a class="wpfp-link" href="?wpfpaction=remove&amp;postid=48" title="Удалить из избранного" rel="nofollow">Удалить из избранного</a>
...
 <script type="text/javascript">
$(document).ready(function(){
$(".wpfp-link").on("click", function() {
  if($(this).attr("title")=="Добавить в избранное") {
     $(".fa-heart").css({color : "#f71e1e"});
  } else  {
     $(".fa-heart").css({color : "#333333"});
  }
});
});
</script>

Добавлено через 1 минуту
Уф, Наверное проблема в том, что ссылка работает через плагин wordpress. и js-файл плагина перебивает Ваш скрипт

@fanatikus · 29.03.2017, 13:25

Сообщение от Shoshona

мне нужно чтобы цвет менятся в зависимости от title.

а почему тогда вы title не меняете

Сообщение от Shoshona

JavaScript
1
2
3
4
5
if($(this).attr("title")=="Добавить в избранное") {
* * *$(".fa-heart").css({color : "#f71e1e"});
* } else *{
* * *$(".fa-heart").css({color : "#333333"});
* }

вам же УФ написал с заменой title, а вы убрали

Добавлено через 5 минут

Сообщение от Shoshona

$(document).ready(function(){
* * * * * * if($(".wpfp-link").attr("title")=="Добавить в избранное") $(".fa-heart").css({color : "#333333"});
* * * * * * else
* * * * $(".fa-heart").css({color : "#f71e1e"});
* * });

тут, после загрузки страницы, если тайтл == 'Добавить в избранное' ставится color : "#333333"
дальше при клике

Сообщение от Shoshona

$(".wpfp-link").on("click", function() {
* if($(this).attr("title")=="Добавить в избранное") {
* * *$(".fa-heart").css({color : "#f71e1e"});
* } else *{
* * *$(".fa-heart").css({color : "#333333"});
* }

опять же проверяете если тайтл == 'Добавить в избранное', меняете цвет на color : "#f71e1e". и все, а тайтл то остался 'Добавить в избранное'. и дальше сколько не кликайте цвет не изменится. добавьте замену тайтл, как УФ советовал.

@Shoshona · 29.03.2017, 13:26 **[ТС]**

Сообщение от fanatikus

а почему тогда вы title не меняете

title меняеться в скрипте плагина!

@fanatikus · 29.03.2017, 14:06

Сообщение от Shoshona

title меняеться в скрипте плагина!

а вы уверены, что меняется? проверяли?

@Shoshona · 29.03.2017, 14:42 **[ТС]**

Сообщение от fanatikus

а вы уверены, что меняется? проверяли?

странный вопросс.
Хотя если меня глаза обманывают, то все может быть

@fanatikus · 29.03.2017, 15:55

Сообщение от Shoshona

странный вопросс.

вполне нормальный вопрос. я спросил потому что так

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
        <script type="text/javascript">
            $(function () {
                if ($('.wpfp-link').attr('title') === 'Добавить в избранное'){
                    $('.fa-heart').css({color: '#333333'});
                }else{
                     $('.fa-heart').css({color: '#f71e1e'});
                }
               //допустим это выполняется скрипт плагина
                $('.wpfp-link').on('click', function (e) {
                    e.preventDefault();
                    if ($(this).attr('title') === 'Добавить в избранное') {
                        $(this).attr('title', 'Удалить из избранного');
                        $(this).text('Удалить из избранного');
                    } else {
                        $(this).attr('title', 'Добавить в избранное');
                        $(this).text('Добавить в избранное');
                    }
                });
                 // а это заменм цвета      
                 $('.wpfp-link').on('click', function (e) {
                    e.preventDefault();
                    if ($(this).attr('title') === 'Добавить в избранное') {
                        $('.fa-heart').css({color: '#333333'});
                    } else {
                        $('.fa-heart').css({color: '#f71e1e'});
                    }
                });
            });
        </script>
       
        <i class="fa fa-heart" aria-hidden="true">test of edit</i>
        <a class="wpfp-link" href="?wpfpaction=remove&amp;postid=48" title="Добавить в избранное" rel="nofollow">Добавить в избранное</a>

все прекрасно работает

@Shoshona · 29.03.2017, 16:14 **[ТС]**

fanatikus, я понял, значит проблема в плагине. он перебивает Ваш скрипт. Спасибо, буду искать в чем проблема.

@fanatikus · 29.03.2017, 16:36

Сообщение от Shoshona

он перебивает Ваш скрипт

думаю, дело не в этом.
а код, который в плагине меняет тайтл, можно глянуть.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Shoshona 30 / 30 / 37 Регистрация: 03.06.2014 Сообщений: 1,055
	29.03.2017, 11:41 [ТС]
	Уф, не работает. Скрипт нужно ставить после ссылки? 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	29.03.2017, 11:47
	пофиг где, хтмл лучше весь напиши, а то не понятно какой блок ты хочешь менять и где он распологается 0

@Shoshona 30 / 30 / 37 Регистрация: 03.06.2014 Сообщений: 1,055
	29.03.2017, 16:14 [ТС]
	fanatikus, я понял, значит проблема в плагине. он перебивает Ваш скрипт. Спасибо, буду искать в чем проблема. 0

Изменение цвета при клике и обратно

Решение