Javascript: Как динамически изменить src изображения с событием на buttonclass? - PullRequest
Новая
       34

Javascript: Как динамически изменить src изображения с событием на buttonclass?

0 голосов
/ 06 июня 2018

У меня проблемы с написанием функции, которая динамически меняет изображение.У меня есть три кнопки: маленькая, средняя и большая.

Когда я нажимаю кнопку, я хочу, чтобы изображение изменилось до желаемого размера.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>

Когда я нажимаю на кнопку, она что-то делает, но не ожидаемое действие.

Пожалуйста, помогите мне!

Ответы [ 3 ]

0 голосов
/ 06 июня 2018

Добавьте аргумент event к функции changeClass.Это позволит вам определить кнопку, с которой произошло событие.

function changeClass(event) {

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

       case 'l': ....
0 голосов
/ 06 июня 2018

Я исправил ваш код, установив класс 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');
    }

    [...]
0 голосов
/ 06 июня 2018 

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