0

这听起来很简单，但我遇到了一些困难。

我有一个按钮可以执行各种代码，如下所示：

document.getElementById('frm_accountId').disabled = false;

这很好，但是，执行此操作的按钮自然会显示一个锁定图标，并且在单击该图标时希望将其更改为解锁图标。

<button id="button_unlock" type="button" onClick="unlock(this)"><img src="<?=base_url();?>assets/images/icons/stock_lock.png"/></button>

所以我想改变的是

<img src="<?=base_url();?>assets/images/icons/stock_lock.png"/>.

是否可以将其分配给php变量并使用 JS 更改它，我认为不是，但这就是我想要做的。

谢谢

4

2 回答 2

0

你可以得到 innerHTML 并改变它

document.getElementById("button_unlock").innerHTML ="<img src='unlock.jpg'/>" ;

但更好的是向您的按钮添加一个 css 类并定义一个背景图像。然后，当单击它时，将类更改为具有另一个图像的类。

.lock {
    background-image: url(lock.jpg);
    }

.unlock {
    background-image: url(unlock.jpg);
    }


<button id="button_unlock" type="button" onClick="unlock(this);" class="lock"></button>
于 2013-02-06T15:58:02.503 回答
0

这是如何切换图像的示例。它使用data-locked属性来维护其状态，并使用对象字面量来定义图像路径。这种方法的优点是它可以处理多个按钮和图像，每个按钮和图像都将保持一个单独的状态，因为代码相对于<img>目标按钮的子级工作。

var images = {
    locked : '<?=base_url();?>assets/images/icons/stock_lock.png',
    unlocked : '<?=base_url();?>assets/images/icons/stock_unlock.png'
};

function toggleLocked(buttonElement)
{
    var locked = buttonElement.getAttribute("data-locked") == "1";

    locked = !locked;
    buttonElement.setAttribute("data-locked", locked ? "1" : "0");

    buttonElement.children[0].src = locked ? images.locked : images.unlocked;
}

HTML：

<button id="button_unlock" type="button" data-locked="1" onClick="toggleLocked(this)"><img src="<?=base_url();?>assets/images/icons/stock_lock.png"/></button>
于 2013-02-06T16:05:07.683 回答