как добавлять и удалять классы в зависимости от опции, выбранной в форме выбора

Я использую пользовательское меню jquery mobile для выбора стран. Я хочу установить значок кнопки на флаг страны.

У меня есть это:

<div class="ui-select">
   // select button
   <a href="#" role="button" id="brandsByCountry-button" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-btn-corner-all ui-shadow">
      <span class="ui-btn-inner ui-btn-corner-all">
         <span class="ui-btn-text">Germany</span>
         // country flag icon - insert country class here
         <span class="ui-icon ui-icon-lang ui-icon-shadow"></span>
      </span>
   </a>
   // selectmenu
   <select data-iconpos="right" class="ui-fake-icon" data-icon="lang" data-native-menu="false" id="brandsByCountry" name="brandsByCountry">
        <option data-placeholder="true" value="default">Country</option>
        <option value="be">Belgium</option>
        <option value="ch">Switzerland</option>
        <option value="de" selected="selected">Germany</option>
    </select>
 </div>

Я могу установить флаг, добавив класс страны из val() в span.ui-icon.

Вопрос:
Когда пользователь меняет выбор, мне нужно добавить новый класс И удалить старый класс страны. Я не знаю, как удалить класс, не удаляя все остальные необходимые классы. Также мне трудно добавить соответствующий класс с помощью val().

У меня есть это:

    $('#brands').bind( "pagebeforeshow", function( event, data ) {
   var initBrand = $('#brandsByCountry').val(),
       closestBtn = $('#brandsByCountry').prev('.ui-btn');

       closestBtn.addClass( initBrand ); // doesn't work
       closestBtn.addClass( "test" ); // works

       $('#brandsByCountry').live('change', function() {
            var str = $(this).children('option[selected]').val();
            console.log(str);  // ok, gets new class

            closestBtn.addClass( str ).removeClass(':not(".ui-icon, .ui-icon-lang, .ui-icon-shadow")');
            })
        })

Спасибо за некоторый вклад!

РЕШЕНИЕ
вот моя окончательная версия, основанная на ответе Skyrim. Я добавил проверку для множественного выбора и значение по умолчанию для выбора для отображения.

$('#brands').one( "pagebeforeshow", function( event, data ) {
     // initial class name
     $('#brandsByCountry').data('oldVal', 'global' );

     // designated element
     var closestBtn = $('#brandsByCountry').prev('a'), 
         orginalClass = $('#brandsByCountry').data('oldVal');

     // add inital class/icon
     closestBtn.addClass( orginalClass+"");

     $('#brandsByCountry').change(function() {

         var $this = $(this),
         // if more than one option is selected go back to global icon
         newClass = $this.val().length >= 2 ? "global" : $this.val(),
         oldClass = $this.data('oldVal');

         $this.data('oldVal', newClass);
         closestBtn.removeClass(oldClass+"").addClass(newClass+""); 
         });

forms jquery select jquery-mobile toggleclass
person frequent    schedule 13.01.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот полное решение на JSFiddle.

EDIT Я редактирую это, чтобы включить сюда весь код (чтобы уменьшить в зависимости от работы JSFiddle)

HTML:

<div class="ui-select"> 
   <a href="#" role="button" id="brandsByCountry-button" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-btn-corner-all ui-shadow"> 
      <span class="ui-btn-inner ui-btn-corner-all"> 
         <span class="ui-btn-text">Germany</span> 
         <span class="ui-icon ui-icon-lang ui-icon-shadow de">test</span> 
      </span> 
   </a> 
   <select data-iconpos="right" class="ui-fake-icon" data-icon="lang" data-native-menu="false" id="brandsByCountry" name="brandsByCountry"> 
        <option data-placeholder="true" value="default">Country</option> 
        <option value="be">Belgium</option> 
        <option value="ch">Switzerland</option> 
        <option value="de" selected="selected">Germany</option> 
    </select> 
</div>

CSS:

.ui-icon.be { background-color: Red;}
.ui-icon.ch { background-color: Green;}
.ui-icon.de { background-color: Blue;}

JS:

$('#brandsByCountry').data('oldVal', $('#brandsByCountry').val());
$('#brandsByCountry').change(function() {
    var $this = $(this);
    var newClass = $this.val();
    var oldClass = $this.data('oldVal');
    $this.data('oldVal', newClass);

    $('.ui-icon').removeClass(oldClass).addClass(newClass);
});

ИЗМЕНИТЬ Я обновляю ссылку JSFiddle (поскольку она была неверной)

ИЗМЕНИТЬ Я снова обновил ссылку JSFiddle, чтобы также включить изменение страны имя (на всякий случай, если вам нужна помощь с этим :))

person Skyrim    schedule 13.01.2012
comment
вы знаете, что странно: вам нужно removeClass(oldClass+).addClass(newClass+), иначе ничего не происходит... Мне было интересно, почему изменение сработало, но классы не были добавлены или удалены. Добавил еще один тестовый класс, потом заработало. Должно быть что-то JQM. Так что теперь это работает, я счастливый турист. большое спасибо! - person frequent; 13.01.2012
comment
@frequent - это странно, но спасибо, что поделились (делаю заметку :p). - person Skyrim; 13.01.2012
comment
Я сделал небольшую модификацию (множественный выбор) и разместил выше. Спасибо еще раз! - person frequent; 13.01.2012