Question

所以我在这里有一个带有几个单选按钮的项目。该计划应能够选择底色，衬里，颜色和阴影技术。右侧的蓝色框用于向客户提供所选零件示例结果的实时概览。我想在其中放置图片，并使用可变的网址。

我的计划是执行类似“ https://www.example.com/images/calculator/base+line+color+shading.png”的操作
从基本无线电输入中获取 base 的位置，例如，可以是“ bodybody”
line 的地方 是从线路单选输入获得的，例如可以是“干净”
，其中 color 是从彩色单选输入获得的，可能是“彩色”
，其中从阴影单选输入获得 shading ，例如可能是“ ccel”

这会给我们留下一个可变的网址“ https://www.example.com/images/calculator/fullbody+clean+colored+ccel.png”

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

我正在为此工作的艺术家正在迅速增加产品基础和样式选择，并且随着时间的推移我将对其进行更新，因此随着时间的推移可扩展更多选项的解决方案将是惊人的。

一如既往，感谢您抽出宝贵的时间阅读本书，我们非常感谢您给出的所有答案，提示/技巧/提示或方向指示！享受周末的人吧！ <3

small overview of my project layout

Answer 1

好的，这是生成图像网址的解决方案：

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

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

希望有帮助！

Answer 2

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>

如何获得可变的图片网址？

2 个答案: