jQuery Syntax für bedingte Logik mit Optionsfeldern?

Mein Formular soll ein Bild basierend auf den in zwei verschiedenen Feldern ausgewählten Optionsfeldern anzeigen (Formular & Farbe).jQuery Syntax für bedingte Logik mit Optionsfeldern?

Ich habe es geschafft, Objekte mit Links als Werte für jede Eigenschaft zu erstellen. Nun, wie sage ich jQuery, um die Quelle von #image zu ändern, wenn ich zum Beispiel gold + round wähle?

Hier ist eine Geige mit Dummy-Bilder: https://jsfiddle.net/fbzf10x6/10/

<body> 
    <form action=""> 
<input type="radio" name="color" value="silver"> silver 
<br> 
<input type="radio" name="color" value="gold"> gold 
<br> 
<input type="radio" name="color" value="platin"> platin 
<br> <br> 

<input type="radio" name="form" value="round"> round 
<br> 
<input type="radio" name="form" value="oval"> oval 
<br> 

</form> 

<div><img id="image" src="#"></div> 

</body>

Quelle

2016-07-28 MrSocrathes

Ich denke, Ihr Objekt in der Geige dient nicht, was Sie hier in der Basis Ihrer Erklärung bedürfen. Das Objekt sollte Kombinationen enthalten wie: 'Bilder = {silverround:" link1 ", silveroval:" link2 ", ....}' – CardCaptor

Sie die onClick Methode verwenden können und ein JavaScript-Funktion die src-Attribut Wert Ihres Bildelement neu zu laden.

Im Folgenden ein kurzes Beispiel:

<html> 
     <head> 
     <script type='text/javascript'> 
     function reloadImgSrc(value) { 
      document.getElementById('image').innerHTML = '<img src="/img/'+value+'.jpg" />'; 
     } 
     </script> 
     </head> 

     <body> 
      <form action=""> 
      <input type="radio" name="color" value="silver" onclick="reloadImgSrc('silver')"> silver 
      <br> 
      <input type="radio" name="color" value="gold" onclick="reloadImgSrc('gold')"> gold 
      <br> 
      <input type="radio" name="color" value="platin" onclick="reloadImgSrc('platin')"> platin 

     </form> 

     <div id="image"></div> 

     </body> 
</html>

Quelle

2016-07-28 20:39:03 EspA

Sie Ihren Code erweitern könnte das Paar von Werten zu halten, die ausgewählt wird, und verwenden Sie beide Werte die Bild-URL in Ihrem Objekt zu finden:

var current = { 
    color: 'silver', form: 'oval' 
} 

$(document).ready(function() { 
    $("input[name=color],input[name=form]").change(function() { 
    current[this.name] = this.value; 
    $('#image').stop().fadeOut(200, function() { 
     $(this).attr('src', images[current.form][current.color]); 
    }).fadeIn(200); 
    }); 
});

JS Fiddle

Quelle

2016-07-28 20:52:25 trincot

Vielen Dank !! Das funktioniert unglaublich gut! Wenn ich eine dritte Option wie "Größe" hinzufügen würde - könnte ich der gleichen Logik folgen und sie einfach auf die gleiche Weise hinzufügen wie Sie? Ich denke, es wird ziemlich kompliziert ... Ich würde es auf dem gleichen "Level" wie Farbe hinzufügen, oder? – MrSocrathes

Sie müssten eine Ebene der Objektverschachtelung in Ihrem 'images' Objekt hinzufügen. Eine andere Möglichkeit besteht darin, in Ihren Bilddateinamen eine strenge Namenskonvention einzuhalten. Wie 'silver-oval-big.png', stellen Sie sicher, dass die Teile in diesem Namen genau mit den Werten Ihrer Optionsfelder übereinstimmen. Dann können Sie den Bilddateinamen erzeugen, ohne dass das Objekt * images * benötigt wird. – trincot

der Punkt von Interesse ist:

$(this).attr('src', paths[images]);

Die Pfade sind nicht definiert.

Wenn keine Eingabe mit Name Formular im Change Handler ausgewählt wird, bevorzuge ich die erste und so kann ich das richtige Bild adressieren: images [formChecked] [colorChecked].

Mein Schnipsel:

var images = { 
 
    oval: { 
 
    silver: "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=38201084", 
 
    gold: "http://images.betteridge.com/images/products/standard/BCA-16-17-14kt-yellow-gold-oval-signet-ring.jpg", 
 
    platin: "http://thumbs.ebaystatic.com/images/g/09UAAOSwBPNXR3UH/s-l225.jpg" 
 
    }, 
 

 
    round: { 
 
    silver: "http://www.silverringjewelry.com/silver-rings/fine-silver-rings.jpg", 
 
    gold: "https://img0.etsystatic.com/031/1/6658158/il_340x270.596198132_jls1.jpg", 
 
    platin: "http://images.costco-static.com/image/media/350-703887-847__1.jpg" 
 
    } 
 
}; 
 

 

 
$(document).ready(function() { 
 
    $('input[name="color"]').first().prop('checked', true); 
 
    $('input[name="form"]').last().prop('checked', true); 
 

 
    
 
    $('input[name="color"], input[name="form"]').change(function (e) { 
 
    var colorChecked; 
 
    var formChecked; 
 
    if (this.name == "color") { 
 
     colorChecked = this.value; 
 
     formChecked = $('input[name="form"]:checked').val() 
 
    } else { 
 
     colorChecked = $('input[name="color"]:checked').val(); 
 
     formChecked = this.value; 
 
    } 
 

 
    $('#image').stop().fadeOut(200, function() { 
 
     $(this).attr('src', images[formChecked][colorChecked]); 
 
    }).fadeIn(200); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form action=""> 
 
    <input type="radio" name="color" value="silver"> silver 
 
    <br> 
 
    <input type="radio" name="color" value="gold"> gold 
 
    <br> 
 
    <input type="radio" name="color" value="platin"> platin 
 
    <br> <br> 
 

 
    <input type="radio" name="form" value="round"> round 
 
    <br> 
 
    <input type="radio" name="form" value="oval"> oval 
 
    <br> 
 

 
</form> 
 

 
<div><img id="image" src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=38201084"></div>

Quelle

2016-07-28 20:57:08 gaetanoM

Das ist großartig, danke! Aber irgendwie passiert nichts, wenn man entweder rund oder oval prüft. Nur die Farbe ändert die Bilder. – MrSocrathes

@MrSocrathes Snippet aktualisiert. – gaetanoM

jQuery Syntax für bedingte Logik mit Optionsfeldern?

Antwort

Verwandte Themen