jQuery mobile: как добавить флажок в заголовок сворачиваемого элемента

Question

jQuery mobile: как добавить флажок в заголовок сворачиваемого элемента

0

Я хочу добавить флажок в заголовок складного элемента. Когда я нажимаю на флажок, разборный элемент не должен открываться. Когда я нажимаю на ярлык, он должен открыться.

Посмотрите, что я сделал: http://jsfiddle.net/heidewitzka/UwkWx/34/

$('.ui-icon-checkbox-on').click(function(e) {
  e.stopPropagation();
  $(this).closest('label').attr( "data-icon", "checkbox-off" );
  $(this).addClass('ui-icon-checkbox-off');
  $(this).removeClass('ui-icon-checkbox-on');
  $(this).closest('label').addClass('ui-checkbox-off');
  $(this).closest('label').removeClass('ui-checkbox-on');
});

$('.ui-icon-checkbox-off').click(function(e) {
  e.stopPropagation();
  $(this).closest('label').attr( "data-icon", "checkbox-on" );
  $(this).addClass('ui-icon-checkbox-on');
  $(this).removeClass('ui-icon-checkbox-off');
  $(this).closest('label').addClass('ui-checkbox-on');
  $(this).closest('label').removeClass('ui-checkbox-off');
});

Все работает нормально, но я не могу очистить флажок. Зачем?

user2483863 04 дек. 2013, в 11:58

Источник

Теги:

javascript

jquery

checkbox

jquery-mobile

1 ответ

Ещё вопросы

ezanker · Accepted Answer · 2013-12-04T12-57-00.000Z

Здесь вы обновили FIDDLE

Я добавил идентификатор метки, содержащей этот флажок, а затем поместил обработчик одного клика на значок.ui, найденный в ярлыке. Здесь вы проверяете, какой класс значка назначен в данный момент, а затем переключите его:

$('#checkBoxLbl .ui-icon').click(function(e) {
    e.stopPropagation();
    if ($(this).hasClass('ui-icon-checkbox-on')) {
        $(this).closest('label').attr("data-icon", "checkbox-off");
        $(this).addClass('ui-icon-checkbox-off');
        $(this).removeClass('ui-icon-checkbox-on');
        $(this).closest('label').addClass('ui-checkbox-off');
        $(this).closest('label').removeClass('ui-checkbox-on');
    } else {
        $(this).closest('label').attr("data-icon", "checkbox-on");
        $(this).addClass('ui-icon-checkbox-on');
        $(this).removeClass('ui-icon-checkbox-off');
        $(this).closest('label').addClass('ui-checkbox-on');
        $(this).closest('label').removeClass('ui-checkbox-off');
    }
});

Проблема с тем, что у вас было, заключается в том, что оба обработчика фактически указывали на один и тот же элемент DOM (значок SPAN).