Javascript:如何使用buttonclass上的事件动态更改图像src?

Question

我在编写动态更改图像的函数时遇到了一些问题。我有三个按钮：小，中和大。

当我按下按钮时，我希望图像更改为首选大小。按钮的 HTML 无法更改，因此我想编写一个 JS 函数来实现这一目标。

下面你看我的脚本：

<img src="" style="width:100%; height:400px;" name="formula" id="formula">
<script type='text/javascript'>
$(document).ready(function(){
changeClass();
document.getElementsByClassName("button-variable-item")[0].addEventListener( 'click', changeClass);
document.getElementsByClassName("button-variable-item")[1].addEventListener( 'click', changeClass);
document.getElementsByClassName("button-variable-item")[2].addEventListener( 'click', changeClass);
});
function changeClass(){
console.log('binnen');
var image_name;
var L = document.getElementsByClassName("button-variable-item-l");
var S = document.getElementsByClassName("button-variable-item-s");
var M = document.getElementsByClassName("button-variable-item-m");
if ( S[0].classList.contains('selected') ){
image_name = "https://www.studio-31.nl/wp-content/uploads/2018/03/WhatsApp-Image-2018-03-16-at-11.52.31.jpeg";
console.log('S');
}else if ( L[0].classList.contains('selected') ){
image_name = "https://www.studio-31.nl/wp-content/uploads/2018/03/WhatsApp-Image-2018-03-16-at-11.52.19.jpeg";
console.log('L');
}else if ( M[0].classList.contains('selected') ){
image_name = "https://www.studio-31.nl/wp-content/uploads/2018/03/WhatsApp-Image-2018-03-16-at-11.46.25.jpeg";
console.log('M');
}
$('#formula').attr('src', image_name);
}
</script>

在这里，您可以找到按钮的 HTML：

<ul class="list-inline variable-items-wrapper button-variable-wrapper " data-attribute_name="attribute_pa_size">
<li data-wvstooltip="L" class="variable-item button-variable-item button-variable-item-l selected" title="L" data-value="l">
<span>L</span>
</li>
<li data-wvstooltip="M" class="variable-item button-variable-item button-variable-item-m" title="M" data-value="m">
<span>M</span>
</li>
<li data-wvstooltip="S" class="variable-item button-variable-item button-variable-item-s" title="S" data-value="s">
<span>S</span>
</li>
</ul>

当我按下按钮时，它会执行某些操作，但不是预期的操作。

请帮帮我！

Answer 1

在您做事之前，我通过将selected类设置为单击的元素来修复您的代码。

function changeClass()
{
console.log('binnen');
//check if function is called from button binding
if($(this).is('.button-variable-item')) {
//remove selected class from every button
$('.button-variable-item').removeClass('selected');
//add selected class to the clicked button
$(this).addClass('selected');
}
[...]

Answer 2

<li data-wvstooltip="L" data-src="image-url-l">
<span>L</span>
</li>
<li data-wvstooltip="M" data-src="image-url-m">
<span>L</span>
</li>
<li data-wvstooltip="S" data-src="image-url-s">
<span>L</span>
</li>
<script type="text/javascript">
$(document).on("click", "li", function(){
	$("#formula").attr("src", $(this).attr("data-src"));
});
</script>

Answer 3

将event参数添加到changeClass函数。这将允许您检测发出事件的按钮。

function changeClass(event) {
switch (event.target.getAttribute('data-value')) {
case 'l': ....