использовать выходные значения для всех изображений? - PullRequest
Новая
       6

использовать выходные значения для всех изображений?

0 голосов
/ 06 января 2019

Ниже обновления кода 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/>

1 Ответ

0 голосов
/ 06 января 2019

Во-первых, не начинайте идентификаторы с цифр.

Но так как вы используете jQuery, вы можете зацикливаться и присваивать каждое изменение - идентификаторы не нужны 

$(".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/>
...