मेरे पास एक कैनवास तत्व है जिसमें एक छवि है, जो प्रारंभ में एक ग्रीन स्क्वायर है। मैं 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);
    }
});

एचटीएमएल:

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

मुझे केवल रंग चुनने में सक्षम होने तक ही मिला है। जब आकार का चयन करने की बात आती है, तो मैं रंग की पिछली पसंद को बनाए रखने के लिए प्रदर्शित छवि को बदलना चाहता हूं (ताकि उदाहरण के लिए, यदि लाल वर्तमान में चयनित रंग था और उपयोगकर्ता ने सर्कल का चयन किया था, तो प्रदर्शित छवि लाल रंग में बदल जाएगी वृत्त और हरा या नीला वृत्त नहीं)। इसके विपरीत, यदि उपयोगकर्ता ने पहले आकार का चयन किया और फिर एक रंग का चयन किया, तो मैं चाहता हूं कि प्रदर्शित छवि आकार की पसंद को बनाए रखे।

मेरे पास एक अस्पष्ट विचार है कि समाधान मौजूदा इंडेक्स के आधार पर सरणी इंडेक्स से 1 जोड़ने या घटाना 1 के साथ करना हो सकता है - लेकिन मुझे कोई सुराग नहीं है कि इसे कैसे कार्यान्वित किया जाए। मैं जेएस के लिए अपेक्षाकृत नया हूं इसलिए किसी भी मदद की सराहना की जाएगी। धन्यवाद।

1
P. Tan 23 जून 2016, 17:27
buttonset() क्या है?
 – 
Rayon
23 जून 2016, 17:31
क्या आप एक Fiddle प्रदान कर सकते हैं?
 – 
Callan Heard
23 जून 2016, 17:37
Buttonset एक jQuery UI विजेट है जो "संबंधित बटनों के लिए एक दृश्य समूह प्रदान करता है" - इसलिए रंग और आकार विकल्पों को रेडियो बटन के 2 सेट में एक साथ समूहीकृत करने की अनुमति देता है। api.jqueryui.com/buttonset
 – 
P. Tan
23 जून 2016, 17:44

3 जवाब

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

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);
});
0
Lebowski156 23 जून 2016, 18:13

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

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

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

0
Deep 23 जून 2016, 18:19
इसके लिए धन्यवाद। हालांकि छोटी समस्या: यदि आप एक से अधिक आकार विकल्पों में से एक पर क्लिक करते हैं यानी सर्कल एक से अधिक बार, यह सरणी इंडेक्स से 1 घटाता रहता है और इस प्रकार छवियों के माध्यम से साइकिल चलाता है। क्या इसे रोकने का कोई तरीका है ताकि एक बार बटन चुनने के बाद, दूसरी बार क्लिक करने पर यह सरणी अनुक्रमणिका को नहीं बदलेगा?
 – 
P. Tan
23 जून 2016, 18:21
धन्यवाद, हाँ, मैंने देखा है कि, मैंने यहां प्लंकर और कोड भी अपडेट किया है। इससे बचने के लिए आपको चेंज इवेंट का इस्तेमाल करना चाहिए।
 – 
Deep
23 जून 2016, 18:25

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

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");
});
0
Callan Heard 23 जून 2016, 18:22
संभावित रूप से सुरुचिपूर्ण समाधान, हालांकि मैंने पहेली पृष्ठ का निरीक्षण किया और विभिन्न बटनों की जांच के बावजूद स्रोत को बिल्कुल भी नहीं बदला जा रहा है।
 – 
P. Tan
23 जून 2016, 19:50
क्षमा करें, यह काम करना चाहिए लेकिन अब मेरे लैपटॉप पर नहीं, जब मैं कर सकता हूं तो एक कामकाजी फाइल भेज देगा!
 – 
Callan Heard
24 जून 2016, 23:23
प्रतीक्षा के लिए खेद है.. मेरा मानना ​​है कि छवि स्रोत को अद्यतन नहीं किया जा रहा है, छवियों के लोड न होने के कारण हो सकता है - यहां एक कार्यशील उदाहरण फ़ाइल का लिंक दिया गया है: dropbox.com/s/a65nhtlt8wqhaia/test.zip?dl=0
 – 
Callan Heard
27 जून 2016, 13:50
अपडेट करें: यह केवल फिडल में jQuery का उपयोग हो सकता है, इसे आयात किए बिना!
 – 
Callan Heard
27 जून 2016, 13:51