Wie könnte ich das erreichen, wenn jemand auf das Bild des ausgewählten Produkts klickt, um die URL der Schaltfläche unter den Bildern zu ändern?

<div id="product">
  <img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
  <img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
  <img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>

<br>

<a id="buy" href="#"><button>Go to the the specific link</button></a>

Text / Bild nur zur Unterhaltung, sie sind nicht wirklich die Produkte

Was ich versucht habe

window.onload = function() {
    var sel = document.getElementById('product');
    sel.onchange = function() {
        document.getElementById("buy").href = "https://amazon.com/" + this.value;
    }
}

Hier ist ein Codepen http://codepen.io/anon/pen/bdyWGa

0
ekclone 17 Aug. 2015 im 17:52

4 Antworten

Beste Antwort

JQuery-Lösung:

$(function(){
 $("img").click(function(){
    $("#buy").attr("href","https://amazon.com/"+$(this).attr("value"));
 });  
});

Javascript Version:

var images = document.getElementsByTagName("img");
for (var i=0, len=images.length, img; i<len; i++) {
   img = images[i];
   img.addEventListener("click", function() {  
      document.getElementById("buy").setAttribute("href", "https://amazon.com/"+ this.getAttribute("value"));
      alert("New href value: " + "https://amazon.com/"+ this.getAttribute("value"));
   });
}

Arbeitsgeige: http://codepen.io/anon/pen/NqVjGY

2
Hackerman 17 Aug. 2015 im 15:11
<img id="img1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img id="img2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img id="img3" src="http://placehold.it/300x100?text=Crack" alt="" />

<br>

<a id="buy" href="#"><button>Go to the the specific link</button></a>

Und:

$("#img1").on("click", function(){
$("#buy").attr("href","https://mynewurl.net");
});

Hier beschreiben Sie das Klicken auf welches Bild die URL in was ändert

0
classicalConditioning 17 Aug. 2015 im 15:01

In Javascript. Verwenden Sie e.target, um das aktuelle Klickelement zu übernehmen, den Wert mithilfe von attrubutes abzurufen und auf das href-Attribut anzuwenden.

window.onload = function() {
    var sel = document.getElementById('product');
    sel.onclick = function(e) {
      console.log( e.target.attributes[0].value)
     document.getElementById("buy").setAttribute('href', "https://amazon.com/" + e.target.attributes[0].value) ;
    }
}

Codepen

0
Sudharsan S 17 Aug. 2015 im 15:04

Verwenden Sie jQuery, um allen Bildern ein Klickereignis hinzuzufügen, um den Eigenschaftswert abzurufen und als Ergänzung zur href-Eigenschaft des beabsichtigten Elements hinzuzufügen

$(function(){
 $('img').on('click', function(){
   $('#buy').attr('href',"https://amazon.com/" + $(this).attr('value'));
 });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
  <img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
  <img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
  <img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
0
joyBlanks 17 Aug. 2015 im 15:06