Javascript: 如何使用按钮类上的事件动态更改图像源？

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

<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 2

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

function changeClass(event) {

    switch (event.target.getAttribute('data-value')) {

       case 'l': ....

Answer 3

我通过在您执行操作之前将 selected class 设置为单击的元素来修复您的代码。

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

    [...]

Javascript: 如何使用按钮类上的事件动态更改图像源？

Javascript: How to change image src dynamically with event on buttonclass?

html

javascript

image

src