Question

确实执行了使用Jquery更改元素，如.attr（“data-iconpos”，“...”），可以看到检查元素。但是，它对页面渲染没有影响，这让我很困惑（我期待http://demos.jquerymobile.com/1.2.1/docs/buttons/buttons-icons.html中描述的行为）。
经测试：

Chrome版本39.0.2171.95 m
Firefox 34.0.5
IE 11.0.9600

为什么？（感谢替代解决方案，我的问题仍然是为什么页面呈现失败？：我很想知道我是否错过了关于Jquery的内容）。
我在http://akelai.fr/iconpos.html

处提供了一个代码示例

以下是代码：

<!doctype html>
<html>

<head>
  <title>test iconpos</title>
  <meta charset="UTF-8">
  <meta name="viewport" width="device-width" content="initial-scale=1 maximum-scale=1 user-scalable=no" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  <script>
    $(document).ready(function() {
      $(window).resize(function() {
        windowResize();
      });

      function windowResize() {
        var width = $(window).width();
        if (width < 900) {
          $("#me").attr("data-iconpos", "left");
        } else {
          $("#me").attr("data-iconpos", "right");
        }
      }
    }); //
  </script>
</head>

<body id="theBody">
  <div data-role="page" id="board" data-theme="b">

    <div data-role="header" data-position="horizontal">
      <h1>test changing iconpos</h1>
    </div>
    <div data-role="footer" class="ui-btn">
      <input type="button" id="me" data-icon="grid" value="Is icon on my left (width < 900px) or my right (width > 900px)">
    </div>
  </div>
</body>

</html>

Answer 1

尝试更改按钮的类别：

    if (width < 900) {
      $("#me").removeClass("ui-btn-icon-right").addClass("ui-btn-icon-left");
    } else {
      $("#me").removeClass("ui-btn-icon-left").addClass("ui-btn-icon-right");
    }

更新：正如@Tasos注意到的，必须在父级而不是按钮本身上完成：

    if (width < 900) {
      $("#me").parent().removeClass("ui-btn-icon-right").addClass("ui-btn-icon-left");
    } else {
      $("#me").parent().removeClass("ui-btn-icon-left").addClass("ui-btn-icon-right");
    }

更新2：第三个更简单的选项：

    if (width < 900) {
      $("#me").button("option", "iconpos", "left");
    } else {
      $("#me").button("option", "iconpos", "right");
    }

像.attr这样的Jquery（“data-iconpos”，“...”）没有效果渲染页面

1 个答案: