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

Question

我在我的项目中使用了这个问题的解决方案来更改用户单击按钮时的图标：

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

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

点击前：

点击后：

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

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

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

Answer 1

It's because you have custom CSS (border-radius) on your button. And the buttonMarkup function sets the border-radius to default. So, you have to store the current border-radius, change the button, and restore the border-radius.

Modify your JS function to:

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