Изменение витрина изображения в зависимости от того, что флажки проверяются

Question

http://codepen.io/silentsushix3/pen/gwvAPz

Я работаю на сайте для клиента. Я пытаюсь сделать так, чтобы изображение витрины продукта изменялось в зависимости от параметров, выбранных клиентом. Например, если мой клиент продавал обувь, их модель подписи - «10010101». Но 10010101 stlye обуви приходят в разные цвета, текстуры и размеры. Таким образом, в зависимости от параметров, выбранных клиентом (синий, гранж, размер14), он изменит изображение витрины, чтобы показать правильную обувь.

В настоящее время у меня есть код для витринного изображения. Который

<img width="325" height="325" src="http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger.png" class="attachment-shop_single size-shop_single wp-post-image" alt="burger" title="burger" srcset="http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger-66x66.png 66w, http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger-120x120.png 120w, http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger-150x150.png 150w, http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger-200x200.png 200w, http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger-300x300.png 300w, http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger.png 325w" sizes="(max-width: 325px) 100vw, 325px" style="display: block;" draggable="false"> 

Мой первый чекбокс:

<input class="tmcp-field tm-product-image tm-epo-field tmcp-checkbox" name="tmcp_checkbox_0_0" data-limit="" data-exactlimit="" data-minimumlimit="" data-image="" data-imagep="" data-imagel="" data-price="" data-rules="[&quot;&quot;]" data-original-rules="[&quot;&quot;]" data-rulestype="[&quot;&quot;]" value="<img src=&quot;https://www.wendys.com/redesign/wendys/images/components/12.png&quot;>_0" id="tmcp_choice_0_0_1" tabindex="1" checked="checked" type="checkbox"> 
<label for="tmcp_choice_0_0_1"><span class="tc-label tm-label">TOMATOES MOTHER FUCKER</span></label> 

Мой второй чекбокс:

<input class="tmcp-field tm-product-image tm-epo-field tmcp-checkbox" name="tmcp_checkbox_0_1" data-rules="[&quot;&quot;]" data-original-rules="[&quot;&quot;]" data-rulestype="[&quot;&quot;]" value="http://www.teatimerest.com/page/wp-content/uploads/2016/09/tamatoeslices.png_1" id="tmcp_choice_0_1_2" tabindex="2" checked="checked" type="checkbox"> 
<label for="tmcp_choice_0_1_2"><span class="tc-label tm-label">CHEESE MOTHER FUCKER</span></label> 

Мой сценарий:

function changeImage() { 

    if (document.getElementById("tmcp_choice_0_0_1").attr == "checked") 
    { 
     document.getElementsByClassName("attachment-shop_single size-shop_single wp-post-image").src = "http://www.userinterfaceicons.com/80x80/maximize.png"; 
    } 
} 

Это мой первый реальный Javascript поэтому я стараюсь изо всех сил t o сделайте это самостоятельно, но ударитесь о стену. Я не могу редактировать html, потому что он создан wordpress. Таким образом, это ограничивает меня (или, насколько известно, ноу-хауту) слушателю, потому что я не могу добавить событие onClick в существующий код.

Мой Javascript также не является полным. Я хотел получить доказательство концепции, работающей сначала перед кодированием javascript, чтобы проверить параметры и вернуть изображение в зависимости от отмеченных ящиков. Любая помощь была бы высоко оценена!

Отредактировано: я пытаюсь проверить, установлены ли флажок box1 и box2, а затем отображается изображение1. Если окно 1 и Box3 (я знаю, я не имею 3 пока), но это будет отображаться IMAGE2 и если только box1 проверялся он будет отображать image3

Answer 1

• document.getElementById не могут быть соединены с методами Jquery как attr().
• document.getElementsByClassName возвращает Nodelist, а не один элемент

Вы хотите проверить свойство

function changeImage() { 

    if (document.getElementById("tmcp_choice_0_0_1").checked) { 
     var elems = document.getElementsByClassName("attachment-shop_single size-shop_single wp-post-image"); 

     for (var i=0; i<elems.length; i++) { 
      elems[i].src = "http://www.userinterfaceicons.com/80x80/maximize.png"; 
     } 
    } 
} 

Для вызова этой функции, когда флажков изменить, вы могли бы сделать что-то вроде

var boxes = document.getElementsByClassName('tmcp-checkbox'); 

for (var j=0; j<boxes.length; j++) { 
    boxes[j].addEventListener('change', changeImage) 
}