не может изменить атрибут data-mini

0

Я использую textBox с атрибутом data-mini, установленным в true, и кнопкой для управления атрибутом входного текстового поля.

<input type="text" name="text1"  Value="Enter name" id="txt1" data-mini="true" ></text>

<input type="button" value="Update Attribute"  id="but1" onClick="$(this).UpAttr();"> </button>

Теперь, когда я хочу изменить данные-mini на false, нажмите кнопку выше. Для этого я объявил метод

$.fn.UpAttr=function()
    {
        $("#txt1").attr("data-mini","false");
        $("#txt1").attr("value","New Value");
         alert("The Button was clicked.");;
    }

Но атрибут data-mini не установлен в false, хотя атрибут value обновляется при нажатии кнопки. Невозможно найти решение! Благодаря..

Теги:
attributes

3 ответа

1

Вам необходимо использовать функцию data():

$.fn.UpAttr = function() {
    $("#txt1")
        .data('mini', false)
        .prop('value', 'New Value');
    alert('The Button was clicked.');
}

Это связано с тем, что jQuery сохраняет data-* во внутреннем кеше по соображениям производительности. Только изменение атрибута не обновляет его. Если вы проверите страницу в любом инспекторе DOM, HTML не изменится, но поведение jQuery будет.

  • 0
    Это не сработало ... Разметка для ввода текста по-прежнему мала по размеру!
  • 0
    Я полагаю, что это вызвано плагином, который стилизует ввод. Возможно, вам придется удалить, а затем повторно создать плагин после изменения атрибута data
Показать ещё 3 комментария
1

если вы хотите изменить, чем попробовать, FIDDLE

document.getElementById('txt1').setAttribute('data-mini',false);

Атрибуты data- вытаскиваются при первом доступе к свойствам данных, а затем больше не доступны или не изменяются (все значения данных затем сохраняются внутри jQuery)

  • 0
    Не знаю .. это не сработало .. setAttribute работает для других атрибутов, не знаю, не обновляет ли это data-mini .. !!
  • 0
    извините их сейчас опечатка проверить
Показать ещё 6 комментариев
0

Наконец, я обновил ширину текстового поля, изменив атрибут стиля. Я решил это, используя:

<input type="text"  name="text1" id="txt1"  Value="Enter name" style="width:20%;" ></input>
<br><br>
<input type="button" value="Update Attribute"  id="but1" onClick="$(this).UpAttr();"> </input>

и обновил метод следующим образом:

 $.fn.UpAttr=function()
    {

    $("#txt1").attr('style','width:80%;');
         alert("The Button was clicked.");
    }

Nd Plz проверяет, что ни один из js или css файлов не перекрывает его.

Значение для data-mini также было обновлено предыдущим кодом, но оно не было отражено в макете текстового поля в phonegap + android. Может быть, некоторые или другие css или js будут его переопределять !! Thanx to @rajesh kakawat для изучения этого. :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню