javascript - 循环 jQuery 并在每次更改时分配？

Question

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

你好，我的页面上有很多图片，所以我想将值传递给用户输入的所有图片。我已经成功地为单个图像完成了它，但坚持使用 loop 。任何人都可以帮助我吗？或者是他们做这件事的任何击球方式。我是 javascript 或编码的新手，请将我的请求视为新手。抱歉，我的问题中英语使用不当。希望你明白我的观点。

Answer 1

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(){} 里面--- 如果这两者中的任何一个没有意义或对您不起作用，请告诉我。