Question

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

我正在为客户工作。我正在努力使产品展示图像更改，具体取决于客户端选择的选项。例如，如果我的客户正在销售鞋子，他们的签名模型就是＆＃34; 10010101＆＃34;。但是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="[&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>

我的第二个CheckBox是：

<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实现，所以我尽我所能自己做，但已经碰壁了。我实际上无法编辑html，因为它是由wordpress创建的。因此，我无法将onClick事件添加到预先存在的代码中，因此这限制了我（或者我的noob butt知道），因为我无法将onClick事件添加到预先存在的代码中。

我的Javascript也不完整。在编码javascript以检查选项并根据复选框返回图像之前，我想先获得概念验证。任何帮助都会非常感激！

已编辑：我正在尝试查看是否已选中box1和box2，然后显示image1。如果框1和框3（我知道我还没有3），但它会显示image2，如果只检查了box1，它将显示image3

Answer 1

document.getElementById无法使用attr()等jQuery方法进行链接。
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)
}

根据选中的复选框更改展示图片

1 个答案: