Javascript/jQuery UI : 현재 img를 기반으로 이미지 배열에서 img src 요소 변경 src

Question

이미지가 포함 된 캔버스 요소가 있는데, 처음에는 녹색 사각형입니다. 두 세트의 jQuery UI 라디오 버튼의 입력을 기반으로 표시된 이미지를 변경하려고합니다. 첫 번째 세트는 사용자가 색상을 선택할 수 있고 3 개의 옵션 (빨강/녹색/파랑)을 가질 수 있으며 두 번째 세트는 사용자가 모양 (원/사각형)을 선택합니다.

var images = new Array(); 

images[0] = new Image(); 
images[0].src = '../../../media/images/Red-Circle.png'; 

images[1] = new Image(); 
images[1].src = '../../../media/images/Red-Square.png'; 

images[2] = new Image(); 
images[2].src = '../../../media/images/Green-Circle.png'; 

images[3] = new Image(); 
images[3].src = '../../../media/images/Green-Square.png'; 

images[4] = new Image(); 
images[4].src = '../../../media/images/Blue-Circle.png'; 

images[5] = new Image(); 
images[5].src = '../../../media/images/Blue-Square.png'; 


$(function() { 
    $("#colour").buttonset(); 
    $("#shape").buttonset(); 
}); 

$('#red').click(function() { 
    if ($('#red').is(':checked')) { 
     $("#container #image img").attr("src", images[1].src); 
    } 
}); 

$('#green').click(function() { 
    if ($('#green').is(':checked')) { 
     $("#container #image img").attr("src", images[3].src); 
    } 
}); 

$('#blue').click(function() { 
    if ($('#blue').is(':checked')) { 
     $("#container #image img").attr("src", images[5].src); 
    } 
}); 

HTML :

<div id="container"> 
    <div id="image"> 
      <img src="media/images/Green-Square.png" /> 
    </div> 
</div> 

<form> 
    <div id="colour"> 
      <input type="radio" id="red" name="radio"> 
      <label for="colour1">Red</label> 
      <input type="radio" id="green" name="radio" checked="checked"> 
      <label for="colour2">Green</label> 
      <input type="radio" id="blue" name="radio"> 
      <label for="colour3">Blue</label> 
    </div> 
</form> 
<form> 
    <div id="shape"> 
      <input type="radio" id="circle" name="radio"> 
      <label for="circle">Circle</label> 
      <input type="radio" id="square" name="radio" checked="checked"> 
      <label for="square">Square</label> 
    </div> 
</form> 

버튼 옵션을 체크과 같이 될 때

내 자바 스크립트 코드는 캔버스 요소에 표시 할당 된 하나의 이미지의 배열을 선언

나는 색을 선택할 수있는 한 멀리있다. 모양을 선택할 때 이전에 선택한 색상을 유지하도록 표시된 이미지를 변경하려고합니다. 예를 들어 Red가 현재 선택된 색상이고 사용자가 Circle을 선택한 경우 표시된 이미지가 빨간색으로 변경됩니다 원은 녹색 또는 파란색 원이 아닙니다). 반대로 사용자가 먼저 도형을 선택하고 그 다음에 색을 선택한 경우 표시된 이미지에 모양 선택을 유지하길 원합니다.

나는 현재 인덱스가 무엇인지에 따라 배열 인덱스에서 1을 더하거나 1을 뺀 것과 같은 해결책이 있을지 모른다는 모호한 생각이 있습니다. 그러나 이것을 구현하는 방법에 대한 단서가 없습니다. 나는 JS에 비교적 익숙해 져서 어떤 도움을 주시면 감사하겠습니다. 감사.

Answer 1

여기에 귀하가하려는 것을 나타냅니다.

https://plnkr.co/edit/jMvjJCxHZzr9dxw5B6RR?p=preview

당신이 필요로하는 기능은

$('#circle').change(function() { 
if ($('#circle').is(':checked')) { 


    var a = jQuery.grep(images, function(n ,i) { 
     if (n.src == $("#container #image img").attr("src")) 
     return i; 
    })[0]; 

    var index = images.indexOf(a); 

    $("#container #image img").attr("src", images[index-1].src); 
} 

});

$('#square').change(function() { 
    if ($('#square').is(':checked')) { 
    var a = jQuery.grep(images, function(n ,i) { 
     if (n.src == $("#container #image img").attr("src")) 
     return i; 
    })[0]; 

    var index = images.indexOf(a); 

    $("#container #image img").attr("src", images[index+1].src); 
} 

색상 선택 버튼 논리가 올바르지 않습니다.이 논리도 잘 사용하십시오.

Answer 2

'이미지'개체에 이미지를 저장하고 문자열로 액세스 할 수 있습니다 (예 : 이미지 [ "RedSquare"]) 나는 바이올린을 조합했습니다. 이미지 링크는 깨졌지만 페이지를 살펴보면 src가 제대로 변경된 것을 볼 수 있습니다.

https://jsfiddle.net/5wv5ym5p/

HTML :

<div id="container"> 
      <div id="image"> 
       <img src="media/images/Green-Square.png" /> 
      </div> 
     </div> 

     <form> 
      <div class="shape-config" id="colour"> 
       <input type="radio" id="red" name="radio"> 
       <label for="red">Red</label> 
       <input type="radio" id="green" name="radio" checked="checked"> 
       <label for="green">Green</label> 
       <input type="radio" id="blue" name="radio"> 
       <label for="blue">Blue</label> 
      </div> 
     </form> 
     <form> 
      <div class="shape-config" id="shape"> 
       <input type="radio" id="circle" name="radio"> 
       <label for="circle">Circle</label> 
       <input type="radio" id="square" name="radio" checked="checked"> 
       <label for="square">Square</label> 
      </div> 
     </form> 

JS (필요 JQuery와)

var images = {}; 

images["RedCircle"] = new Image(); 
images["RedCircle"].src = '../../../media/images/Red-Circle.png'; 

images["RedSquare"] = new Image(); 
images["RedSquare"].src = '../../../media/images/Red-Square.png'; 

images["GreenCircle"] = new Image(); 
images["GreenCircle"].src = '../../../media/images/Green-Circle.png'; 

images["GreenSquare"] = new Image(); 
images["GreenSquare"].src = '../../../media/images/Green-Square.png'; 

images["BlueCircle"] = new Image(); 
images["BlueCircle"].src = '../../../media/images/Blue-Circle.png'; 

images["BlueSquare"] = new Image(); 
images["BlueSquare"].src = '../../../media/images/Blue-Square.png'; 


$(function() { 
    $("#colour").buttonset(); 
    $("#shape").buttonset(); 
}); 

$('.shape-config input').click(function() { 
     var colourId = $("#colour input:checked").attr("id"); 
    var colour = $('label[for='+colourId+']').text(); 
    var shapeId = $("#shape input:checked").attr("id"); 
    var shape = $('label[for='+shapeId+']').text(); 
     $("#container #image img").attr("src", images[colour+""+shape].src); 
}); 

Answer 3

왜 전혀 배열/인덱스를 사용하여 저장 귀찮게?

https://jsfiddle.net/0Lqgc3vx/

HTML

<img id="img" src="Green-Square.png" /> 

<form> 
    <input type="radio" name="colour" value="Red"> 
    <label for="colour1">Red</label> 
    <input type="radio" name="colour" value="Green" checked="checked"> 
    <label for="colour2">Green</label> 
    <input type="radio" name="colour" value="Blue"> 
    <label for="colour3">Blue</label> 
</form> 

<form> 
    <input type="radio" name="shape" value="Circle"> 
    <label for="circle">Circle</label> 
    <input type="radio" name="shape" value="Square" checked="checked"> 
    <label for="square">Square</label> 
</form> 

JS

$("input[name='colour']").change(function() { 
    $("#img").attr("src", this.value + "-" + $("input[name='shape']:checked").val() + ".png"); 
}); 

$("input[name='shape']").change(function() { 
    $("#img").attr("src", $("input[name='colour']:checked").val() + "-" + this.value + ".png"); 
});