Как установить атрибуты в HTML-элементы

Question

Как установить атрибуты в HTML-элементы

у меня есть div с атрибутом data-myval = "10". Я хочу обновить его значение; не изменится ли оно, если я использую div.data('myval',20)? Нужно ли мне использовать div.attr('data-myval','20') только?

я путаюсь между HTML5 и jQuery? Посоветуйте, пожалуйста. Спасибо!

редактировать: обновлен div.data('myval')=20 до div.data('myval',20), но все равно HTML не обновляется.

615 6

jQuery html custom-data-attribute

6 ответов:

Comments

Ничего не найдено.

Jashwant · Accepted Answer · 2018-05-29 09:20:30

HTML
<div id="mydiv" data-myval="10"></div>
JS
var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter
демо

ссылка

изменить (после комментария):

если вы проверите ссылку, приведенную выше, в которой говорится:

сам jQuery использует .data() метод сохранения информации под именами ' events 'и' handle', а также резервирует любое имя данных, начинающееся с подчеркивания ( ' _ ' ) для внутреннего использовать.

зачем вам нужно менять html?

если изменение html абсолютно необходимо, вы должны использовать .attr()

HTML
<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>
JS:
alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>
посмотреть демо

Johann Echavarria · Accepted Answer · 2015-10-15 23:53:26

обратите внимание, что jQuery .data() не обновляется при изменении html5 data- атрибуты с javascript.

если вы используете jQuery .data() установить data- атрибуты в HTML элементах вам лучше использовать jQuery .data() читать их. В противном случае при динамическом обновлении атрибутов могут возникнуть несоответствия. Например, см. setAttribute(),dataset(),attr() ниже. Измените значение, нажмите кнопку несколько раз и посмотрите приставка.
$("#button").on("click", function() {
  var field = document.querySelector("#textfield")

  switch ($("#method").val()) {
    case "setAttribute":
      field.setAttribute("data-customval", field.value)
      break;
    case "dataset":
      field.dataset.customval = field.value
      break;
    case "jQuerydata":
      $(field).data("customval", field.value)
      break;
    case "jQueryattr":
      $(field).attr("data-customval", field.value)
      break;
  }

  objValues = {}
  objValues['$(field).data("customval")'] = $(field).data("customval")
  objValues['$(field).attr("data-customval")'] = $(field).attr("data-customval")
  objValues['field.getAttribute("data-customval")'] = field.getAttribute("data-customval")
  objValues['field.dataset.customval'] = field.dataset.customval

  console.table([objValues])
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Example</h1>
<form>
  <input id="textfield" type="text" data-customval="initial">
  <br/>
  <input type="button" value="Set and show in console.table (F12)" id="button">
  <br/>
  <select id="method">
    <option value="setAttribute">setAttribute</option>
    <option value="dataset">dataset</option>
    <option value="jQuerydata">jQuery data</option>
    <option value="jQueryattr">jQuery attr</option>
  </select>
  <div id="results"></div>
</form>

Baqer Naqvi · Accepted Answer · 2017-07-06 16:12:35

вы также можете использовать следующие attr штука;

HTML
<div id="mydiv" data-myval="JohnCena"></div>
скрипт
 $('#mydiv').attr('data-myval', 'Undertaker'); // sets 
 $('#mydiv').attr('data-myval'); // gets
или
$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value

rajesh kakawat · Accepted Answer · 2018-04-02 19:56:35

ваниль Javascript решение

HTML

<div id="mydiv" data-myval="10"></div>

JavaScript:

используя getAttribute() свойства

 var brand = mydiv.getAttribute("data-myval")//returns "10"
 mydiv.setAttribute("data-myval", "20")      //changes "data-myval" to "20"
 mydiv.removeAttribute("data-myval")         //removes "data-myval" attribute entirely

используя JavaScript dataset свойства

var myval = mydiv.dataset.myval     //returns "10"
mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
mydiv.dataset.myval = null          //removes "data-myval" attribute

Blender · Accepted Answer · 2012-11-23 08:31:45

если вы используете jQuery, используйте .data():
div.data('myval', 20);
вы можете хранить произвольные данные с .data(), но вы ограничены только строки при использовании .attr().

Cody · Accepted Answer · 2017-12-17 10:10:25

[jQuery].данных() против .attr () vs .extend ()

метод jQuery .data() обновляет внутренний объект, управляемый jQuery с помощью метода, если я прав.

если вы хотите обновить свой data-attributes С некоторым распространением, используйте --
$('body').attr({ 'data-test': 'text' });
-- иначе $('body').attr('data-test', 'text'); будет работать нормально.

еще один способ, которым вы могли бы сделать это с помощью --
$.extend( $('body')[0].dataset, { datum: true } );
-- что ограничивает любое изменение атрибута HTMLElement.prototype.dataset, нет никаких дополнительных HTMLElement.prototype.attributes.