невозможно реализовать функцию удаления класса и добавления класса в jquery

Question

невозможно реализовать функцию удаления класса и добавления класса в jquery

0

У меня есть сценарий ниже

  $.fn.SoundToggle = function() {
            var sound_staus = $('#soundstatus').data('status');
            if (sound_staus === 'mute')
            {
                $('#soundstatus').data('status', 'unmute');//ui-icon ui-icon-volume-off
                $("#soundstatus span").removeClass("ui-icon ui-icon-volume-off").addClass("ui-icon ui-icon-volume-on");
            } else
            {
                $('#soundstatus').data('status', 'mute');
                $("#soundstatus span").removeClass("ui-icon ui-icon-volume-on").addClass("ui-icon ui-icon-volume-off");
            }
        }

И html

<a class="button"  title="Sound Mute/Unmute" data-status="mute" onClick="$(this).SoundToggle();" id="soundstatus"> 
                    <span class="ui-icon ui-icon-volume-on"></span>
</a>

Я хочу переключить jquery ui Speaker Mute & unmute два значка при нажатии.

Но мой вышеприведенный код не показывает результат правильно, вместо того, чтобы удалять предыдущий, он показывает два значка одновременно, как этот образ:

Пожалуйста, помогите мне, почему мой код не работает нормально.

beginner 08 окт. 2013, в 20:53

Источник

0

@ Рани ... ты не будешь беспокоиться? Вы пробовали toggleClass api.jquery.com/toggleClass или .addClass и .removeClass в отдельных строках
SRy 08 окт. 2013, в 18:36
4

потому что это 3 минуты назад .. подожди еще немного.
Hussein Nazzal 08 окт. 2013, в 18:36
1

Почему вы удаляете и добавляете один и тот же класс ui-icon ?
Barmar 08 окт. 2013, в 18:37
0

Можете ли вы сделать jsfiddle.com, демонстрирующую проблему? Кстати, ваша функция должна использовать $(this) вместо жесткого кодирования #soundstatus .
Barmar 08 окт. 2013, в 18:40
1

@ Бармар или еще лучше, this
Kevin B 08 окт. 2013, в 18:41
0

@rani Это объясняет, почему вы удаляете и добавляете ui-icon-volume-on и ui-icon-volume-off . Но почему вы удаляете ui-icon и затем добавляете его обратно?
Barmar 08 окт. 2013, в 18:43
1

@rani говорит, что нет смысла удалять / добавлять значок пользовательского интерфейса, потому что он необходим для обеих версий.
Kevin B 08 окт. 2013, в 18:43
1

Потому что в вашем примере ваше начальное значение статуса UNMUTE
Jhonatas Kleinkauff 08 окт. 2013, в 18:52
1

Хотя, когда я изменяю его скрипку, чтобы использовать data-status="mute" как вопрос, я все еще не вижу описанный им симптом множественного значка.
Barmar 08 окт. 2013, в 18:54
0

Поскольку это не происходит в скрипке, можете ли вы дать нам ссылку на приложение?
Barmar 08 окт. 2013, в 18:56
1

Должно быть что-то, что вы не показываете, что это вызывает. Если вы получаете несколько значков, их должно быть несколько. Я даже пытался присвоить оба класса одному и тому же диапазону, но это не привело к перекрытию значков.
Barmar 08 окт. 2013, в 19:06
0

@ Barmar Вы правы, из-за длинного кода, он был спутан с другим span теперь я получил правильный вывод. Я ответил на это здесь stackoverflow.com/a/19256516/2732367
beginner 08 окт. 2013, в 19:26

Показать ещё 10 комментариев

Теги:

jquery

jquery-ui

3 ответа

1

 $.fn.SoundToggle = function() {
            var sound_staus = $('#soundstatus').data('status');
            if (sound_staus === 'mute')
            {
                $('#soundstatus').data('status', 'unmute');//ui-icon ui-icon-volume-off
                $("#soundstatus span").removeClass("ui-icon ui-icon-volume-on").addClass("ui-icon ui-icon-volume-off");
            } else
            {
                $('#soundstatus').data('status', 'mute');
                $("#soundstatus span").removeClass("ui-icon ui-icon-volume-off").addClass("ui-icon ui-icon-volume-on");
            }
        }

Исходный код:

 if (sound_staus === 'mute')
            {
                ...
                $("#soundstatus span").removeClass("ui-icon ui-icon-volume-off").addClass("ui-icon ui-icon-volume-on");
            }..

Но, начальное значение статуса IS MUTE И класс ui-icon ui-icon-volume-on

Итак, почему при отключении звука вы пытаетесь удалить ui-icon ui-icon-volume-off вместо этого?

Jhonatas Kleinkauff 08 окт. 2013, в 17:38

0

Мне трудно понять, что ты изменил.
Kevin B 08 окт. 2013, в 18:42
0

Пояснения, пожалуйста?
Bucket 08 окт. 2013, в 18:43
2

Он сменил on и off .
Barmar 08 окт. 2013, в 18:44
0

Ваш ответ отображает прямо противоположную иконку моего желания. Что не так. Только что я проверил мой код вопроса выше. Вот скрипка моего вопроса выше jsfiddle.net/TrxHx/4 . Он работает нормально, но почему не работает в моем приложении?
beginner 08 окт. 2013, в 18:52
0

я проверил твой код со мной приложение, но все та же проблема
beginner 08 окт. 2013, в 19:01

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

0

Я решил это, предоставив id значку div.

Я думаю, из-за огромного кода он показывал несколько значков, ограничиваясь несколькими проходами.

Я думал, что идентификатор должен быть уникальным, поэтому я добавил атрибут id="volumeicondId" то есть id="volumeicondId"

<a id="soundstatus" class="button"  title="Sound Mute/Unmute" data-status="unmute" onClick="$(this).SoundToggle();" > 
                    <span id="volumeicondId" class="ui-icon ui-icon-volume-on"></span>

И функция js

  $.fn.SoundToggle = function() {
            var sound_staus = $('#soundstatus').data('status');
            if (sound_staus === 'unmute')
            {
                $('#soundstatus').data('status', 'mute');//ui-icon ui-icon-volume-off
                $("#volumeicondId").removeClass("ui-icon ui-icon-volume-on").addClass("ui-icon ui-icon-volume-off");
            } else
            {
                $('#soundstatus').data('status', 'unmute');
                $("#volumeicondId").removeClass("ui-icon ui-icon-volume-off").addClass("ui-icon ui-icon-volume-on");
            }
        }

beginner 08 окт. 2013, в 17:41

Ещё вопросы

@ Рани ... ты не будешь беспокоиться? Вы пробовали toggleClass api.jquery.com/toggleClass или .addClass и .removeClass в отдельных строках
потому что это 3 минуты назад .. подожди еще немного.
Почему вы удаляете и добавляете один и тот же класс ui-icon ?
Можете ли вы сделать jsfiddle.com, демонстрирующую проблему? Кстати, ваша функция должна использовать $(this) вместо жесткого кодирования #soundstatus .
@rani Это объясняет, почему вы удаляете и добавляете ui-icon-volume-on и ui-icon-volume-off . Но почему вы удаляете ui-icon и затем добавляете его обратно?
@rani говорит, что нет смысла удалять / добавлять значок пользовательского интерфейса, потому что он необходим для обеих версий.
Потому что в вашем примере ваше начальное значение статуса UNMUTE
Хотя, когда я изменяю его скрипку, чтобы использовать data-status="mute" как вопрос, я все еще не вижу описанный им симптом множественного значка.
Поскольку это не происходит в скрипке, можете ли вы дать нам ссылку на приложение?
Должно быть что-то, что вы не показываете, что это вызывает. Если вы получаете несколько значков, их должно быть несколько. Я даже пытался присвоить оба класса одному и тому же диапазону, но это не привело к перекрытию значков.
@ Barmar Вы правы, из-за длинного кода, он был спутан с другим span теперь я получил правильный вывод. Я ответил на это здесь stackoverflow.com/a/19256516/2732367
Мне трудно понять, что ты изменил.
Ваш ответ отображает прямо противоположную иконку моего желания. Что не так. Только что я проверил мой код вопроса выше. Вот скрипка моего вопроса выше jsfiddle.net/TrxHx/4 . Он работает нормально, но почему не работает в моем приложении?
я проверил твой код со мной приложение, но все та же проблема

Wolfram · Accepted Answer · 2013-10-08T15-54-00.000Z

Как сказал Джонатас Кляйнкауфф, у вас есть свой status и значки, смешанные с вашим исходным кодом. При первом щелчке статус будет mute, поэтому вы попытаетесь удалить класс ui-icon-volume-off, которого нет, поэтому на самом деле класс не удаляется. После этого вы добавляете ui-icon-volume-on и заканчиваете тем, что оба класса установлены одновременно, поэтому отображаются оба значка.

Вы делаете это прямо в своей скрипке (статус unmute, поэтому звук unmute, а класс должен быть ui-icon-volume-on, что и есть).

Чтобы исправить код в вашем вопросе, вам нужно либо переключить начальный статус, чтобы включить unmute как в скрипте:

<a class="button" title="Sound Mute/Unmute" data-status="unmute" onClick="$(this).SoundToggle();" id="soundstatus"> 
    <span class="ui-icon ui-icon-volume-on"></span>
</a>

или установить другой класс HTML:

<a class="button" title="Sound Mute/Unmute" data-status="mute" onClick="$(this).SoundToggle();" id="soundstatus"> 
    <span class="ui-icon ui-icon-volume-off"></span>
</a>

Возможно, вы захотите заглянуть в функцию jQuery .toggleClass которая имеет хороший второй параметр, логический переключатель, указывающий, хотите ли вы добавить или удалить класс. Тогда вы могли бы сделать что-то вроде этого:

var $soundIcon = $('#soundstatus span');
var soundShouldBeTurnedOn = currentStatus === "mute";
$soundIcon.toggleClass("ui-icon-volume-on", soundShouldBeTurnedOn)
          .toggleClass("ui-icon-volume-off", !soundShouldBeTurnedOn);

Но это работает в вашей скрипке, просто получите код оттуда. Насколько я понимаю: если состояние data-status mute , значок должен быть off . Это отличается в вашем HTML, но правильно в вашем JS.
Да, ты прав. Я также проверил свою скрипку. Но его снова отображаются три иконки. Я злюсь