CODEWITHSUNDEEP
javascripthtmlcolor-picker
ddoye
ddoye

Reputation: 51

Loop jQuery and assign on each change?

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

Test loop code here : http://jsfiddle.net/xu291Lqr/

Working code for single image : http://jsfiddle.net/3ugfzL68/4/

Hi, I have many images on my page, so i want to pass value to all images input by users. i have done it for single image successfully, but stuck with loop . Can any one please help me in this. or is their any batter way to do this. Im new to javascript or coding to please consider my request as newbie. Sorry for poor English use in my question. hope you understand my points.

Upvotes: 2

Views: 2554

Answers (1)

Cody Geisler
Cody Geisler

Reputation: 8617

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

By reading the reference documentation above, you can see the definition is

jQuery.each( array, callback )

where callback takes the form function( index, value ){}

So you need to instead, 

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); 
  });
}

Also note, that your .img should have been img --- img is a HTML element, whereas .img is a query selector for a class attribute. (e.g. .img would find <img class="img">, but not <img>. Just use $('img') instead)

Additionally, you have no class="control" anywhere, so the .change function would never be called.

The $.each needs to go inside a $('input').on('change',function(){}), but you need to remove all instances of onChange='update()' in those input elements if that's the route you want to go. You could also just put $.each inside of a function window.update = function(){} --- Let me know if either of those two don't make sense or don't work for you.

Upvotes: 1

Related Questions