对所有图像使用输出值？

Question

下面的 javascript 代码只更新了我页面上的 1 个 img src，我的页面上有 10 到 20 张图片。一种方法是我多次粘贴上面的代码并在图像上一个一个地应用。他们有没有更好的方法来做到这一点，这样我就可以在我所有的图像上应用输入值。

测试我的代码：http://jsfiddle.net/3ugfzL68/5/

function update() {
  let src = 'https://test.com/imgService.ashx?imagetype=typeit&postid=657406&width=' +
    $('#size2').val().replace('#', '') + '&height=100&RenderText=' +
    $('#name').val().replace('#', '') + '&TextSize=' +
    $('#size1').val().replace('#', '') + '&TextColor=%23' +
    $('#clr1').val().replace('#', '') + '&BgColor=%23' +
    $('#clr2').val().replace('#', '');
  $('#1Img').attr('src', src);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
Font Size: <input class="textsize" id="size1" onchange="update()" value="55" size="3"> Font Color: <input class="jscolor" id="clr1" onchange="update()" name="color" value="FF0000" size="6"> Background Color: <input class="jscolor" onchange="update()"
  name="color" id="clr2" value="FFFFFF" size="6"> Width: <input class="textsize" id="size2" onchange="update()" value="355" size="4">
<input class="textsize" id="name" onchange="update()" value="[field title]" type="hidden">
<br/> Style 1: <img id="1Img" alt="Image 1" src="https://test.com/imgService.ashx?imagetype=typeit&postid=657406&width=350&height=100&RenderText=name here&TextSize=55&TextColor=%23ff0000&BgColor=%23"> Style 2: <img id="2Img" alt="Image 2" src="https://test.com/imgService.ashx?imagetype=typeit&postid=655506&width=350&height=100&RenderText=2nd style name here&TextSize=55&TextColor=%23ff0000&BgColor=%23">

<br/><br/>

Answer 1

首先ID不要以数字开头。

但由于您使用 jQuery，您可以在每次更改时循环并分配 - 不需要 ID

$(".control").on("change", function() {
  $(".img").each(function() {
    let src = $(this).attr(src).split("&width")[0] +
      '&width=' + $('#size2').val().replace('#', '') +
      '&height=100&RenderText=' + $('#name').val().replace('#', '') +
      '&TextSize=' + $('#size1').val().replace('#', '') +
      '&TextColor=%23' + $('#clr1').val().replace('#', '') +
      '&BgColor=%23' + $('#clr2').val().replace('#', '');
    $('#1Img').attr('src', src);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
Font Size: <input class="control textsize" id="size1" onchange="update()" value="55" size="3"> Font Color: <input class="control jscolor" id="clr1" onchange="update()" name="color" value="FF0000" size="6"> Background Color: <input class="control jscolor"
  onchange="update()" name="color" id="clr2" value="FFFFFF" size="6"> Width: <input class="control textsize" id="size2" onchange="update()" value="355" size="4">
<input class="textsize" id="name" onchange="update()" value="[field title]" type="hidden">
<br/> Style 1: <img class="img" id="Img1" alt="Image 1" src="https://test.com/imgService.ashx?imagetype=typeit&postid=657406&width=350&height=100&RenderText=name+here&TextSize=55&TextColor=%23ff0000&BgColor=%23"> Style 2: <img class="img" id="Img2" alt="Image 2"
  src="https://test.com/imgService.ashx?imagetype=typeit&postid=655506&width=350&height=100&RenderText=2nd+style+name+here&TextSize=55&TextColor=%23ff0000&BgColor=%23">

<br/><br/>

对所有图像使用输出值？

use output values for all images?

html

javascript

color-picker