Как изменить атрибут onclick в html-файле?

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть индикатор выполнения, и я хочу изменить data-pro-bar-percent значение его атрибута с 80 на 100 , когда я нажимаю на ссылку.

Изменение атрибута должно быть следующим: data-pro-bar-percent="80" —> data-pro-bar-percent="100"

Это HTML:

 <a class="button" href="#">Click Link</a>
<div class="pro-bar-container color-green-sea">
    <div class="pro-bar bar-100 color-turquoise" data-pro-bar-percent="30" data-pro-bar-delay="4000">
        <div class="pro-bar-candy candy-ltr"></div>
    </div>
</div>

1. Вам понадобятся jQuery attr() , если вы используете jQuery.

2. Обязательно укажите этому <a> тегу идентификатор, чтобы иметь возможность правильно выбрать его в Javascript.

3. Будет ли процент всегда меняться с 80 на 100, или это просто начальная и конечная суммы выборки?

4. @Joe Путаница возникнет, когда класс содержит более одного элемента button . Просто предвидение того, что может произойти.

Ответ №1:

Ссылки — это не кнопки! Используйте кнопки!

Используйте метод DOM setAttribute для изменения атрибута данных. Однако это сложно, вы можете либо захватить элемент процента по его имени класса (если он имеет общее имя класса с другим элементом, который вы можете использовать this.children.children.setAttribute() ), либо захватить ближайший вложенный дочерний элемент, который вы хотите.

Просто установите элемент link / button an eventListener (если он находится в форме, кнопка по умолчанию действует как кнопка отправки, поэтому вам может потребоваться запретить действие по умолчанию) и дайте ему функцию для изменения атрибута данных.

 <button id="myButton">Click Me</button>

var button = document.getElementById("myButton");
button.addEventListener("click",function() {
    document.getElementsByClassName("pro-bar")[0].setAttribute("data-pro-bar-percent","100");
}, false);

Как прокомментировал @rlemon, ему не getElementsByClassName хватает поддержки querySelector , поэтому вы должны использовать это вместо этого.

 document.querySelector(".pro-bar").setAttribute("data-pro-bar-percent","100");

1. К вашему сведению, QSA имеет лучшую поддержку по сравнению с getElementsByClassName. Производительность его незначительна. и если вам нужен только первый запрос соответствия, и вам не нужен [0]

Ответ №2:

Вы должны использовать .data() вместо .attr() , чтобы получить текущее значение данных, а затем также установить его. Намного эффективнее.

http://api.jquery.com/data/

 $('.button').on('click', function(){
    var current = $('.pro-bar').data("pro-bar-percent");
    $('.pro-bar').data("pro-bar-percent", current  = 20);
});

Ответ №3:

Вы можете использовать jQuery, сначала указав идентификатор вашей ссылки:

 <a class="button" id="btnLink" href="#">Click Link</a>

Теперь используйте это, если вы напрямую хотите изменить значение data-pro-bar-percent на 100.

 $("#btnLink").on("click",function(){ 
    $(".pro-bar .bar-100 .color-turquoise").attr("data-pro-bar-percent","100");
});

Если вы просто хотите увеличить значение текущей строки на 20, используйте это:

 $("#btnLink").on("click",function(){ 
    var targetEle = $(".pro-bar .bar-100 .color-turquoise");
    var currentBar = parseInt(targetEle.attr("data-pro-bar-percent")) 20; // whatever value you want to increment with.

    targetEle.attr("data-pro-bar-percent",currentBar);
});

Надеюсь, это поможет