Question

这听起来很简单但是有些困难。

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

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进行更改，我认为不是，但这就是我想要做的事情。

谢谢

Answer 1

您可以获取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>

Answer 2

这是一个如何切换图像的示例。它使用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>

使用JS更改按钮上的图像

2 个答案: