जावास्क्रिप्ट/jQuery यूआई: वर्तमान आईएमजी स्रोत के आधार पर छवियों की एक सरणी से तत्व आईएमजी स्रोत बदलना

आप अपनी छवियों को 'छवियों' ऑब्जेक्ट में संग्रहीत कर सकते हैं और उन्हें स्ट्रिंग द्वारा एक्सेस कर सकते हैं (उदा छवियां ["रेडस्क्वायर"]) मैंने एक पहेली को एक साथ रखा है। छवि लिंक टूटा हुआ है लेकिन यदि आप पृष्ठ का निरीक्षण करते हैं तो आप देख सकते हैं कि स्रोत ठीक से बदला जा रहा है।

https://jsfiddle.net/5wv5ym5p/

एचटीएमएल:

<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>

जे एस (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);
});

आप जो करने की कोशिश कर रहे हैं उसके लिए यहां एक प्लंकर है।

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

कलर सेलेक्ट बटन लॉजिक भी सही नहीं है कृपया इस लॉजिक का इस्तेमाल वहां भी करें।

सरणी/अनुक्रमणिका का उपयोग करने और इसे बिल्कुल संग्रहीत करने से परेशान क्यों?

https://jsfiddle.net/0Lqgc3vx/

एचटीएमएल

<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>

जेएस

$("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");
});