Зацикливать jQuery и назначать на каждое изменение? - PullRequest
Новая
       6

Зацикливать jQuery и назначать на каждое изменение?

0 голосов
/ 06 января 2019 
$(".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/>

Код тестового цикла здесь: http://jsfiddle.net/xu291Lqr/

Рабочий код для одного изображения: http://jsfiddle.net/3ugfzL68/4/

Привет, У меня есть много изображений на моей странице, поэтому я хочу передать значение всем изображениям, введенным пользователями. Я сделал это для одного изображения успешно, но застрял в петле. Может ли кто-нибудь, пожалуйста, помогите мне в этом. или их любой способ сделать это. Я новичок в javascript или кодировании, чтобы рассмотреть мой запрос как новичок. Извините за плохое использование английского в моем вопросе. надеюсь, вы понимаете мои пункты.

1 Ответ

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

http://api.jquery.com/jquery.each/

Читая справочную документацию выше, вы можете увидеть определение 

jQuery.each( array, callback )

, где callback принимает форму function( index, value ){}

Так что вам нужно вместо этого, 

window.update = function(){
  $.each($("img"),function(i,v) {
    let $v = $(v);
    console.log('$v',$v,v); // note $v vs v
    let src = $v.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('#', '');
    $v.attr('src', src); 
  });
}

Также обратите внимание, что ваш .img должен был быть img --- img - это элемент HTML, тогда как .img - это селектор запроса для атрибута класса. (например, .img найдет <img class="img">, но не <img>. Просто используйте $('img') вместо)

Кроме того, у вас нет class="control" в любом месте, поэтому функция .change никогда не будет вызываться.

* * * * * * * * * * * * * * * * * * * * $.each должен входить внутрь $('input').on('change',function(){}), но вам нужно удалить все экземпляры onChange='update()' в этих элементах ввода, если вы хотите пройти по этому маршруту. Вы также можете просто поместить $.each внутрь function window.update = function(){} --- Дайте мне знать, если один из этих двух не имеет смысла или не работает для вас.

...