jQuery mobile：更改按钮的图标也会改变它的形状

Question

我在项目中使用了this问题的解决方案，在用户点击按钮时更改按钮的图标：

 $('#buttonSwitch').buttonMarkup({icon: "minus"});

但是，不仅图标而且按钮的形状也会发生变化（圆角）：

点击之前：

点击后：

你可以在这里找到一个最小的例子：-removed -

我想知道如何在不改变按钮形状的情况下更改图标。 在此先感谢您的帮助。

编辑：还有一个小问题。点击后，按钮底部有一个小的白色边框：

Answer 1

这是因为你的按钮上有自定义CSS（border-radius）。 buttonMarkup函数将border-radius设置为默认值。因此，您必须存储当前的border-radius，更改按钮并恢复border-radius。

将您的JS函数修改为：

function switchIcon() {
    iconSwitched = !iconSwitched;

    /* Store the objects */
    var button = $('#buttonSwitch');
    var parent = button.parent();
    var sibling = button.siblings().filter('span').first();

    /* Store the border-radius */
    var br = button.css('border-radius');
    var pr = parent.css('border-radius');
    var sr = sibling.css('border-radius');

    if (iconSwitched)
        button.buttonMarkup({icon: "minus"});
    else
        button.buttonMarkup({icon: "add"});

    /* Now, the border-radius has been set using the buttonMarkup function
     * We need to restore it to our custom border-radius to get our custom radius back.
     * Note that you may want to also set -webkit-border-radius 
     * and -moz-border-radius as well
     */
    button.css('border-radius', br);
    parent.css('border-radius', pr);
    sibling.css('border-radius', sr);

    /* Get rid of box shadow too */
    parent.css('box-shadow', 'none');
};