Home>

There is a product catalog, you need to do, so as you click on the "Add to Cart" icon on the icon, it changed to another. On the back looks like this:

<
SVG class= "i-icon" >
     ≪
Use xlink: href= "# <
?= $ itembasket!= ''? 'icon-done': 'icon-cart'? >
"≫
≪
/use >
≪
/SVG >

Tell me how to make on the front, so that the icon changes without rebooting the page, just click?

  • Answer # 1
    const handler= e= &gt;
     {
      const useel= (E.CurrentTarget ?? E) .QuerySelector ('Use'),
            isdone= /-done$/i.test_useel.getattribute('xlink :href '));
      Useel.SetAttribute ('XLink: Href', `#icon -$ {isdone? 'Cart': 'Done'}`);
    };
    For (Const Svgel of Document.QuerySelectorall ('. i-icon'))
      Svgel.addeventlistener ('Click', Handler); 
    .i-icon {width: 5rem; HEIGHT: 5REM; CURSOR: POINTER; }
    .i-icon + .i-icon {margin-left: 3rem; } 
    &lt;
    SVG class= "i-icon" viewbox= "0 0 100 100" &gt;
      &Lt;
    DEFS &GT;
        &Lt;
    Circle ID= "Icon-Cart" CX= "50" CY= "50" R= "50" Fill= "# CCC" /&GT;
        &Lt;
    Circle id= "icon-done" CX= "50" CY= "50" R= "50" Fill= "# 4D4" /&GT;
      &Lt;
    /DEFS &GT;
      &Lt;
    use xlink: href= "# icon-cart" &gt;
    &Lt;
    /use &gt;
    &Lt;
    /SVG &GT;
    &Lt;
    SVG class= "i-icon" viewbox= "0 0 100 100" &gt;
      &Lt;
    DEFS &GT;
        &Lt;
    Circle ID= "Icon-Cart" CX= "50" CY= "50" R= "50" Fill= "# CCC" /&GT;
        &Lt;
    Circle id= "icon-done" CX= "50" CY= "50" R= "50" Fill= "# 4D4" /&gt;
      &Lt;
    /DEFS &GT;
      &Lt;
    use xlink: href= "# icon-cart" &gt;
    &Lt;
    /use &gt;
    &Lt;
    /SVG &GT;
    
  • Answer # 2
    const handler= e= &gt;
     {
      const useel= (E.CurrentTarget ?? E) .QuerySelector ('Use'),
            isdone= /-done$/i.test_useel.getattribute('xlink :href '));
      Useel.SetAttribute ('XLink: Href', `#icon -$ {isdone? 'Cart': 'Done'}`);
    };
    For (Const Svgel of Document.QuerySelectorall ('. i-icon'))
      Svgel.addeventlistener ('Click', Handler); 
    .i-icon {width: 5rem; HEIGHT: 5REM; CURSOR: POINTER; }
    .i-icon + .i-icon {margin-left: 3rem; } 
    &lt;
    SVG class= "i-icon" viewbox= "0 0 100 100" &gt;
      &Lt;
    DEFS &GT;
        &Lt;
    Circle ID= "Icon-Cart" CX= "50" CY= "50" R= "50" Fill= "# CCC" /&GT;
        &Lt;
    Circle id= "icon-done" CX= "50" CY= "50" R= "50" Fill= "# 4D4" /&GT;
      &Lt;
    /DEFS &GT;
      &Lt;
    use xlink: href= "# icon-cart" &gt;
    &Lt;
    /use &gt;
    &Lt;
    /SVG &GT;
    &Lt;
    SVG class= "i-icon" viewbox= "0 0 100 100" &gt;
      &Lt;
    DEFS &GT;
        &Lt;
    Circle ID= "Icon-Cart" CX= "50" CY= "50" R= "50" Fill= "# CCC" /&GT;
        &Lt;
    Circle id= "icon-done" CX= "50" CY= "50" R= "50" Fill= "# 4D4" /&gt;
      &Lt;
    /DEFS &GT;
      &Lt;
    use xlink: href= "# icon-cart" &gt;
    &Lt;
    /use &gt;
    &Lt;
    /SVG &GT;
    
  • Answer # 3

    as an option.

    <
    ! DOCTYPE HTML >
    ≪
    HTML >
    ≪
    HEAD >
        ≪
    Title >
    ≪
    /title >
        ≪
    script src= "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jquery.min.js" >
    ≪
    /script >
        ≪
    STYLE TYPE= "TEXT /CSS" >
            SVG.
            {
                Border: 1px Solid Black;
            }
        ≪
    /STYLE >
    ≪
    /Head >
    ≪
    Body >
    ≪
    SVG class= "i-icon" >
         ≪
    use xlink: href= "# icon-cart" >
    ≪
    /use >
    ≪
    /SVG >
    ≪
    Script Type= "Text /JavaScript" >
        $ ('. i-icon'). ON ('Click', Function (E)
        {
            alert (e.currenttarget.firstelementchild.attributes [0] .Value)
            if (e.currenttarget.firstelementchild.attributes [0] .Value== "# icon-cart")
            {
                e.currenttarget.firstelementchild.attributes [0] .Value= "# icon-done";
                alert (e.currenttarget.firstelementchild.attributes [0] .Value)
            }
            ELSE.
            {
                E.CURRENTTARGET.FIRSTELEMENTCHILD.ATTRIBUTS [0] .VALUE= "# Icon-Cart";
                alert (e.currenttarget.firstelementchild.attributes [0] .Value)
            }
        })
    ≪
    /script >
    ≪
    /Body >
    ≪
    /HTML >
    
  • Answer # 4

    as an option.

    <
    ! DOCTYPE HTML >
    ≪
    HTML >
    ≪
    HEAD >
        ≪
    Title >
    ≪
    /title >
        ≪
    script src= "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jquery.min.js" >
    ≪
    /script >
        ≪
    STYLE TYPE= "TEXT /CSS" >
            SVG.
            {
                Border: 1px Solid Black;
            }
        ≪
    /STYLE >
    ≪
    /Head >
    ≪
    Body >
    ≪
    SVG class= "i-icon" >
         ≪
    use xlink: href= "# icon-cart" >
    ≪
    /use >
    ≪
    /SVG >
    ≪
    Script Type= "Text /JavaScript" >
        $ ('. i-icon'). ON ('Click', Function (E)
        {
            alert (e.currenttarget.firstelementchild.attributes [0] .Value)
            if (e.currenttarget.firstelementchild.attributes [0] .Value== "# icon-cart")
            {
                e.currenttarget.firstelementchild.attributes [0] .Value= "# icon-done";
                alert (e.currenttarget.firstelementchild.attributes [0] .Value)
            }
            ELSE.
            {
                E.CURRENTTARGET.FIRSTELEMENTCHILD.ATTRIBUTS [0] .VALUE= "# Icon-Cart";
                alert (e.currenttarget.firstelementchild.attributes [0] .Value)
            }
        })
    ≪
    /script >
    ≪
    /Body >
    ≪
    /HTML >