0

I have a click function that will change my image to another color.

$(document).on( "click", ".cor", function() {

var element = $(this);
var I = element.attr("data-c");

if(I=="Blue") {
    var color = "Blue";
    var c = "#47afff";
    $("#changejs").attr("src", "/img-img/logo.png");
}
else if(I=="Lightblue"){
    var color = "Lightblue";
    var c="#349ff7";
    $("#changejs").attr("src", "/img-img/logo_blue.png");
}

});

when user clicks in span color it will get the span color data-c and change the image based on its color. It works in chrome but not on ios safari. any ideas why?

<span class="cor Blue" data-c="Blue"></span>
<span class="cor Lightblue" data-c="Lightblue"></span>

the image to change:

<img id=changejs src="/img-img/logo_pink.png">
RGS
  • 4,062
  • 4
  • 31
  • 67
  • there is a typo here `id=changejs` – brk Sep 23 '18 at 10:41
  • 2
    When you say it "doesn't work," do you see the attribute change but you don't see the new image? Or do you see the attribute not change at all? What do you see when you debug the code? – T.J. Crowder Sep 23 '18 at 10:41
  • @brk - No, that's perfectly valid HTML. – T.J. Crowder Sep 23 '18 at 10:41
  • @T.J.Crowder user clicks in the span, and the image not change to user. I don't know how to debug on ios safari. on chome it works nice and no debug message. – RGS Sep 23 '18 at 10:43
  • @RobinZigmond the click works, the click is not the problem here. – RGS Sep 23 '18 at 10:44
  • @RickJoe do you have a Mac? You can remotely debug safari over a usb cable. https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787 – evolutionxbox Sep 23 '18 at 10:48
  • @RickJoe - How do you know the click works? (Re debugging: You can use a debugger connecting to your device on Mac OS, or insert debugging code showing information on the page, etc.) – T.J. Crowder Sep 23 '18 at 10:49
  • @RickJoe - Robin was right. [`click` doesn't work](http://jsfiddle.net/ce7b5vap/) on my iPad, but [`touchstart` does](http://jsfiddle.net/ce7b5vap/1). – T.J. Crowder Sep 23 '18 at 10:51
  • @T.J.Crowder I add an `alert("message");` in my function and it shows just fine when click in span occurs. – RGS Sep 23 '18 at 10:51
  • @RickJoe Even with the code above? It doesn't on my iPad. Please update your question with a [mcve] demonstrating the problem (and demonstrating that the click is getting handled), ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/)). – T.J. Crowder Sep 23 '18 at 10:52
  • @T.J.Crowder it works on my iphone :/. but I'll try to add `click touchstart`. because it is a website and I'd like to work on computer too. thank you for your help! – RGS Sep 23 '18 at 10:54
  • @T.J.Crowder id it valid html ` – brk Sep 23 '18 at 10:55
  • it is a valid html5. no quote is needed anymore. – RGS Sep 23 '18 at 10:56
  • @brk - Quotes around attribute values were never required in HTML. The oldest spec I readily have access to is 3.2, and it didn't require it. I know browsers never did. Unquoted values are fine if the value meets certain criteria (like not containing spaces or quotes). More: https://html.spec.whatwg.org/#attributes-2 – T.J. Crowder Sep 23 '18 at 11:20

0 Answers0