Question

我有一个进度条，并希望在点击链接时将其data-pro-bar-percent属性值从80更改为100。

属性更改应如下所示： data-pro-bar-percent="80" - ＆gt; 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>

Answer 1

链接不是按钮！使用按钮！

使用DOM的setAttribute方法更改数据属性。这很棘手，你可以通过它的类名获取百分比元素（如果它与另一个元素共享一个类名，你可能想使用this.children.children.setAttribute()），所以抓住你想要的最接近的嵌套子元素。

只需将链接/按钮元素设置为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 lacks the support querySelector does，所以你应该使用它。

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

Answer 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);
});

Answer 3

您可以使用jQuery，首先为您的链接提供ID：

<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);
});

希望这有帮助

如何在html文件中更改onclick属性？

3 个答案:

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