Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Не обновляется содержимое тегов (https://javascript.ru/forum/jquery/77620-ne-obnovlyaetsya-soderzhimoe-tegov.html)

hardway 28.05.2019 16:50

Не обновляется содержимое тегов
 
У меня на странице есть пару тегов <span> с атрибутом value, и это значение у всех одинаковое. После попытки изменить текст этих тегов текст не изменяется, а прибавляется к текущему, но если будет всего лишь один тег <span> с атрибутом value и каким-то значением, то всё работает как положено, то есть заменяется текст.

Вот код замены текста:

$("span[value='user']").text(Number($("span[value='user']").text()) + 1);

Dilettante_Pro 28.05.2019 17:21

<span value = "user">1</span>
<span value = "user">2</span>
<span value = "user">20</span>  
<button onclick="changeText();">Change</button>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
function changeText() {
  $("span[value='user']").each(function() {
     $(this).text(+$(this).text() + 1);
  });
}
</script>

hardway 28.05.2019 17:40

Dilettante_Pro, всё равно прибавляется новое значение строки к текущей. И да, я забыл упомянуть, что после нажатия на первую кнопку выполняется функция, которая меняет значение полей на +1 и удаляет эту кнопку, при этом добавляет вторую, на которую есть функция. Делает она всё тоже самое, только создаёт первую кнопку и вместо +1 делает -1. В общем, циклический процесс получается.

laimas 28.05.2019 17:44

Цитата:

Сообщение от hardway
есть пару тегов <span> с атрибутом value

Откуда и span может взяться value?

hardway 28.05.2019 17:53

laimas, спасибо за указание, забыл про это.

Dilettante_Pro 28.05.2019 18:02

Цитата:

Сообщение от hardway
всё равно прибавляется новое значение строки к текущей

В моем примере здесь?
В моем примере прибавляются не строки, а УВЕЛИЧИВАЮТСЯ числовые значения - при каждом нажатии на 1.

Можно сделать, чтобы менялись туда-сюда.

<span value = "user">1</span>
<span value = "user">2</span>
<span value = "user">20</span>  
<button onclick="changeText();">Change</button>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
var delta = 1;
function changeText() {
  $("span[value='user']").each(function() {
     $(this).text(+$(this).text() + delta);
  });
  delta = -delta;
}
</script>

hardway 28.05.2019 18:07

Dilettante_Pro, не так выразился. В общем, использовав твой пример скрипта и изменив атрибут value на title всё стало работать так, как должно. Спасибо за помощь.

Dilettante_Pro 28.05.2019 18:29

Цитата:

Сообщение от laimas
Откуда и span может взяться value?

Хоть и нету value у span, но селектор работает:)
<span>5</span>
<span value = "user">1</span>
<script>
alert(document.querySelector("span[value='user']").value);
alert(document.querySelector("span[value='user']").innerText);
</script>

laimas 28.05.2019 18:49

Цитата:

Сообщение от Dilettante_Pro
Хоть и нету value у span, но селектор работает

И какой смысл в таком атрибуте и селекторе, если он используется на 50%?

Malleys 28.05.2019 20:57

Цитата:

Сообщение от laimas
И какой смысл в таком атрибуте и селекторе, если он используется на 50%?

<span value="user">1</span>
У представителя типа Element имеется свойство attributes, геттер, который возвращает объект типа NamedNodeMap, в котором хранятся представленные атрибуты элемента. Хотя согласно спецификации такой атрибут ничего не значит, у него нет никакого значения, и реализация элемента в классе HTMLSpanElement никак его не использует, однако атрибут представлен в DOM, и соответственно должен быть отражён в объекте свойства attributes.

Зато вы можете наследовать от HTMLSpanElement, и можете дать смысл такому атрибуту. Вы могли бы использовать атрибут вида data-*, если вам не нужно расширение: в таком случае видно, что это ваш собственный атрибут, и читатели вашего кода не полезут в документацию, чтобы узнать о новом атрибуте!

Также вы могли бы создать элемент в пространстве XML, в таком случае вы сами определяете имена и атрибуты и их значение и семантику.

Для того, чтобы прочитать конкретный атрибут, также можно воспользоваться методом Element.prototype.getAttribute

Почему у элемента типа HTMLInputElement есть геттер/сеттер value? Потому что так определён класс. Геттер/сеттер value делает дополнительные проверки, которые позволяют значение получаемого/устанавливаемого атрибута привести к соответствующему типу. А метод getAttribute прочитает значение из DOM так, как оно определено.


Часовой пояс GMT +3, время: 09:04.