如何获取可变图像 URL？

Question

所以我在这里得到了一个带有几个单选按钮的项目。该计划是为了能够选择基础、衬里、颜色和阴影技术。右侧的蓝色框旨在为客户提供所选零件示例结果的实时概览。我想在那里放置一个带有可变 URL 的图像。

我的计划是：“https://www.example.com/images/calculator/base+line+color+shading.png”
base 是从基础无线电输入获得的，例如“全身”
line 是从线单选输入中获得的，例如可以是“干净”
color 是从彩色单选输入获得的，可以是例如“colored”
其中 shading 是从着色无线电输入中获取的，例如“ccel”

这将离开我们带有“https://www.example.com/images/calculator/fullbody+clean+colored+ccel.png”的可变网址

同时，我不希望他们必须选择所有输入来获得概览，如果他们只选择“fullbody”，那么变量 URL 应该变成“https://www.example.com/images/calculator/fullbody.png”

我正在为其做这件事的艺术家正在迅速增加产品基础和风格选择，我会随着时间的推移对其进行更新，因此随着时间的推移可以扩展更多选项的解决方案将是惊人的。

与往常一样，感谢您抽出宝贵时间阅读，非常感谢您提供任何答案或提示/技巧/提示或指示方向！享受周末的人们！

small overview of my project layout

Answer 1

data-position="1" 用于基组

data-position="2" 用于行组

data-position="3" 用于颜色组

data-position="4" 用于阴影组

..

..

data-position="k" 将用于第 k 个值组，依此类推...

在此处查看工作示例https://jsfiddle.net/y2khfjwp/40/

<div style="width: 50%; float: Left;">
<h2>
Base
</h2>
<input type="radio" name="base" class="main-inputs" data-position="1" value="fullbody" onchange="makeImage(this)"/>Full Body<br>
<input type="radio" name="base" class="main-inputs" data-position="1" value="halfbody" onchange="makeImage(this)"/>Half Body<br>
<input type="radio" name="base" class="main-inputs" data-position="1" value="xyzbody" onchange="makeImage(this)"/>xyz Body<br>
<input type="radio" name="base" class="main-inputs" data-position="1" value="abcbody" onchange="makeImage(this)"/>abc body<br>
<hr>
<h2>
Line
</h2>
<input type="radio" name="line" class="main-inputs" data-position="2" value="clean" onchange="makeImage(this)"/>Clean<br>
<input type="radio" name="line" class="main-inputs" data-position="2" value="clean2" onchange="makeImage(this)"/>Clean2<br>
<input type="radio" name="line" class="main-inputs" data-position="2" value="clean3" onchange="makeImage(this)"/>Clean3<br>
<input type="radio" name="line" class="main-inputs" data-position="2" value="clean4" onchange="makeImage(this)"/>Clean4<br>
<hr>
<h2>
Color
</h2>
<input type="radio" name="color" class="main-inputs" data-position="3" value="colored" onchange="makeImage(this)"/>Colored<br>
<input type="radio" name="color" class="main-inputs" data-position="3" value="colored2" onchange="makeImage(this)"/>Colored2<br>
<input type="radio" name="color" class="main-inputs" data-position="3" value="colored3" onchange="makeImage(this)"/>Colored3<br>
<input type="radio" name="color" class="main-inputs" data-position="3" value="colored4" onchange="makeImage(this)"/>Colored4<br>
<hr>
<h2>
Shade
</h2>
<input type="radio" name="shade" class="main-inputs" data-position="4" value="ccel" onchange="makeImage(this)"/>Ccel<br>
<input type="radio" name="shade" class="main-inputs" data-position="4" value="ccel2" onchange="makeImage(this)"/>Ccel2<br>
<input type="radio" name="shade" class="main-inputs" data-position="4" value="ccel3" onchange="makeImage(this)"/>Ccel3<br>
<input type="radio" name="shade" class="main-inputs" data-position="4" value="ccel4" onchange="makeImage(this)"/>Ccel4<br>
</div>
<div style="width: 50%; float: Right;">
OutPut: <img id="final-output-src" src="Please select Options" /><br><span id="final-output">Please select Options</span>
</div>
<script>
var path = [];
function makeImage(element)
{
  var imagePath = "";
  path[element.getAttribute('data-position')] = element.value;
  imagePath = finalImagePath();
  document.getElementById("final-output-src").src = imagePath;
  document.getElementById("final-output").innerHTML = imagePath;
};
function finalImagePath() {
    var imageSrc = "https://www.example.com/images/calculator/";
    var selections = "";
    for(var i=1 ; i<=path.length ; i++) {
        if(typeof path[i] != 'undefined' && path[i] != '') {
            if(selections == "") {
                selections = selections + path[i];
            } else {
                selections = selections + "+" + path[i];
            }
        }
    }
    if(selections != "") {
        selections = selections + ".png";
        imageSrc = imageSrc + selections;
    }
    return imageSrc;
}
</script>

Answer 2

好的，这里是生成图片url的解决方案：

const partials = document.querySelectorAll('#partials input');
const fullBody = document.getElementById('fullbody');
const baseUrl = 'some-root-url.com/';
const fileType = '.png';
let imageUrl = baseUrl + 'some-default-url' + fileType;

// Add Event Listeners

fullBody.addEventListener('change', function(){
  let checked = document.querySelectorAll('#partials input:checked');
  // deselect each partial
    for(let i = 0; i < checked.length; i++){
      checked[i].checked = false;
    }
    // Set the imageUrl var to the fullbody
    imageUrl = baseUrl + this.value + fileType;

    // see the imageUrl!
    console.log(imageUrl);
});

for(let i = 0; i < partials.length; i++){
  partials[i].addEventListener('change', function(){
    // uncheck fullBody if checked
    fullBody.checked = false;

    // init the imageUrl
    imageUrl = baseUrl;

    // loop through each checked option and add the value to the imageUrl
    let checked = document.querySelectorAll('#partials input:checked');

    for(let i = 0; i < checked.length; i++){
      imageUrl += checked[i].value;
    }
    // add the file type
    imageUrl += fileType;

    // see the imageUrl!
    console.log(imageUrl)
  });
}

这是相应的 HTML

<div id="partials">
  <label for="base">Base</label><input name="base" type="checkbox" value="base" /><br />
  <label for="line">Line</label><input name="line" type="checkbox" value="line" /><br />
  <label for="color">Color</label><input name="color" type="checkbox" value="color" /><br />
  <label for="Shading">Shading</label><input name="shading" type="checkbox" value="shading" />
</div>

<label for="fullbody">Full Body</label><input name="fullbody" id="fullbody" type="checkbox" value="fullbody" />

And a JSFiddle to demo

还有一个提示，您希望使用复选框而不是单选，因为单选是为单选而不是多选而设计的。

希望有帮助！