0

プロジェクトでこの質問の解決策を使用して、ユーザーがボタンをクリックしたときにボタンのアイコンを変更しました。

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

ただし、アイコンだけでなく、ボタンの形状も変化します（角が丸い）。

クリックする前に：クリックする前に

クリック後：クリック後

ここに最小限の例があります：-removed-

ボタンの形を変えずにアイコンを変える方法を教えてください。よろしくお願いします。

編集：まだ1つの小さな問題があります。クリックすると、ボタンの下部に次の小さな白い境界線が表示されます。

クリックする前に クリック後

4

1 に答える 1

0

これは、ボタンにカスタムCSS（border-radius）があるためです。また、buttonMarkup関数は、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');
};
于 2013-01-24T14:43:27.517 に答える