Jquery 使用 attr() returns 对象对象更改 HTML 属性

Question

我已经阅读了多篇不同的文章和问题，但都无济于事。我有一个 PHP 页面，该页面将使用 AJAX 使用数据库中的值更新 easypiechart，每 X 分钟检查一次。在此示例中，我已将时间减少到 10 秒，并带有一个警告框以显示所做的更改。

我可以使用 attr() 查看 "data-percent"，但是如果我尝试更改 "data-percent" 属性的值，它会 returns "Object Object"。

我正在尝试暂时将值手动更改为 90，直到我可以在添加 ajax 响应作为替换之前让此功能正常工作。

代码：

    <!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<div id="test" class="easy-pie-chart txt-color-blue easyPieChart" data-percent="38" data-pie-size="160">
    <span class="percent percent-sign txt-color-blue font-lg semi-bold"></span>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    if (!window.jQuery) {
        document.write('<script src="js/libs/jquery-2.1.1.min.js"><\/script>');
    }
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
    if (!window.jQuery.ui) {
        document.write('<script src="js/libs/jquery-ui-1.10.3.min.js"><\/script>');
    }
</script>

<script>
// Setup AJAX request -->
function updateWidgets(){
    $.ajax({
      url: "widgetGet.php",
      type: "POST",
      success: function(data) {
        var response = $.parseJSON(data);
        var idea = parseInt(response.test);
        var ID = $("#test").attr("data-percent");
        var IDchange = $("#test").attr("data-percent", 90);
        alert(ID);
      }
    });
  }

  updateWidgets();
  setInterval(updateWidgets, 10000);
  </script>

如果您将警报从 ID 切换到 IDchange，您可以看到我的问题出在哪里。谢谢你们，因为我知道我在这里有一个很棒的社区。

更新，可以理解的是，警报功能不应该用于调试。问题所在（不确定 attr() 是否如此）是解决方案，即使用每 10 秒启动一次的 AJAX 响应来更新 html 属性。 this 等文档显示属性是使用 attr() 更新的，这让我感到困惑。

简而言之，如何使用每 10 秒接收一次数据的 AJAX 更新包含 easypiechart 的 div 的 html 属性？

Answer 1

.attr() 函数 returns jQuery 对象，当它用两个参数调用时。换句话说，你得到了 $("#test").

的值

这样做是为了让您可以做类似

的事情

$("#test").attr("foo", "bar").hide();

如果要查看更改后的值，则：

var IDchange = $("#test").attr("data-percent", 90).attr("data-percent");

Answer 2

在阅读了大量文章后，我找到了 easypiecharts 本身的答案。与 easypiecharts 关联的 JS 将触及数据属性。阅读 easypiecharts 的文档我找到了答案：

$('#test').data('easyPieChart').update(90); //to update the chart to 90%

我的问题是解决问题的方向，因为大量文章都引用了 attr() 函数。对于我的场景，attr() 函数不会更新图表（prop() 也不会更新图表，除非刷新图表以直观地看到更新）。这些文章在与其他外部 JS 文件无关的元素上引用了此函数。

感谢大家的贡献，我今天学到了一些重要的教训。我希望有人发现这个答案对任何想要使用 AJAX 和具有动态百分比更新的 easypiecharts 的人都有帮助。

Jquery 使用 attr() returns 对象对象更改 HTML 属性

Jquery change HTML attribute using attr() returns object object

javascript

jquery

attr