Question

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

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/>

使用所有图像的输出值？

1 个答案: