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/

嗨，我的页面上有很多图像，因此我想将价值传递给用户输入的所有图像。我已经成功地为单个图像完成了操作，但是遇到了循环问题。谁能帮我这个忙。还是他们的任何连击方式我对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(){}内---让我知道这两个是否对您没有意义或不起作用。

循环jQuery并分配每个更改？

1 个答案: