Блог

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

Я работаю над сайтом для клиента. Я пытаюсь сделать так, чтобы изображение витрины продукта менялось в зависимости от выбранных клиентом параметров. Например, если мой клиент продавал обувь, его фирменной моделью является «10010101». Но 10010101 серия обуви бывает разных цветов, текстур и размеров. Таким образом, в зависимости от параметров, которые выбирает клиент (синий, гранж, размер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="[amp;quot;amp;quot;]" data-original-rules="[amp;quot;amp;quot;]" data-rulestype="[amp;quot;amp;quot;]" value="<img src=amp;quot;https://www.wendys.com/redesign/wendys/images/components/12.pngamp;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="[amp;quot;amp;quot;]" data-original-rules="[amp;quot;amp;quot;]" data-rulestype="[amp;quot;amp;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, поэтому я изо всех сил стараюсь сделать это самостоятельно, но наткнулся на стену. На самом деле я не могу редактировать html, потому что он создан WordPress. Так что это ограничивает меня (или, насколько знает мой новичок) слушателем a, потому что я не могу добавить событие onClick в существующий код.

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

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

• document.getElementById не может быть скован с помощью таких методов jQuery, как attr() .
• document.getElementsByClassName возвращает список узлов, а не один элемент

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

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