javascript - Jquery 使用 attr() 返回 object 对象更改 HTML 属性

Question

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

我可以使用 attr() 查看“data-percent”，但如果我尝试更改“data-percent”属性的值，它会返回“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() 函数在使用两个参数调用时返回 jQuery 对象。换句话说，您取回了 $("#test") 的值。

它这样做，所以你可以做类似的事情

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

如果您想查看更改后的值，则:

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