时间戳

首页 > 解决方案 > 循环jQuery并分配每个更改？

javascript - 循环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/>

在这里测试循环代码：http: //jsfiddle.net/xu291Lqr/

单个图像的工作代码：http: //jsfiddle.net/3ugfzL68/4/

嗨，我的页面上有很多图像，所以我想将价值传递给用户输入的所有图像。我已经成功地为单个图像完成了它，但卡住了循环。任何人都可以在这方面帮助我。或者是他们的任何击球手方式来做到这一点。我是 javascript 或编码新手，请考虑我作为新手的请求。对不起，我的问题中英语使用不佳。希望你能理解我的观点。

标签： javascripthtmlcolor-picker

解决方案

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需要进入 a ，但如果这是您要走的路线，则需要删除这些输入元素中的所有$('input').on('change',function(){})实例。onChange='update()'您也可以只放入$.each一个function window.update = function(){} --- 让我知道这两个中的任何一个是否没有意义或不适合您。

推荐阅读