在自定义创建的按钮中隐藏HTML javascript代码

时间:2014-08-04 23:01:59

标签: javascript jquery html button

我是新手代码并需要一些帮助。我正在经营一家在线商店,而且我正在使用selz.com。一个人可以上传数字商品并嵌入“立即购买”商品。 Selz提供的网站上的按钮。现在Selz按钮设计非常难看,我想制作一个新的按钮设计,但是在点击“立即购买”时会托管所有代码。 Selz的按钮。另一个重要的注意事项,下面的代码是Selz'立即购买'他们提供的按钮。一旦有人点击按钮,就会为支付系统带来叠加效果。这是一个关于我正在谈论的内容的youtube - https://www.youtube.com/watch?v=u-Dvm17jYeo

这是否可以创建一个自定义按钮,用于存储激活Selz'立即购买所需的所有数据。按钮叠加效果?

以下是Selz'现在购买的代码'按钮。谢谢你的时间!!!

<script data-selz-t="_selz-btn-default" data-selz-a="modal" data-selz-ct="f2f2f2" data-selz-  cb="fd4f06" data-selz-b="http://selz.co/1triLby">
if (typeof _$elz === "undefined") { var _$elz = {}; }
if (typeof _$elz.b === "undefined") { 
_$elz.b = { e: document.createElement("script") }; 
_$elz.b.e.src = "https://selz.com/embed/button"; 
document.body.appendChild(_$elz.b.e); }
</script>
<a href="http://selz.co/1triLby" target="_blank" class="_selz_nojs_link">Buy this on Selz</a>
<a href="https://selz.com" target="_blank" class="_selz_nojs_link">Sell digital downloads on Selz</a>  

2 个答案:

答案 0 :(得分:3)

如果你不喜欢常规的Selz按钮,我们有一个jQuery插件,我认为这正是你需要的: https://github.com/Selz/jquery.selz

它允许您创建自己的按钮,只需很少的编码就可以使用叠加层,如果需要,可以在叠加层内发生事件时获得回调。

我不确定是谁在这告诉你你不能这样做但是我会提到它支持我们应该更多地推动它,因为它更加灵活拥有像您一样的编码知识的用户。

P.S。我们很快就将按钮的设计更改为更扁平的设计,因此它不会变得丑陋&#34;正如你所说的那样。设计总是主观的,所以你永远不会取悦所有人:)

干杯 山姆 - Selz的设计师和前端开发

答案 1 :(得分:0)

我无法测试您的确切情况,但我能够制作一个丑陋的按钮,然后隐藏它。

我漂亮的按钮运行自己的代码,然后在丑陋的按钮上运行click事件。

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Ugly Button Test</title>

        <style>
        .fugly {
        background-color: yellow;
        color: red;
        border: 4px dotted purple;
        }

        .pretty {
        background-color: blue;
        color: yellow;
        }
        </style>
    </head>
    <body onload="fixFugly()">

    <button class="fugly" data-my-unique-id="rbutton1">Hidden fugly button</button>

     <script>
     function fixFugly() {
       var uglyButton = document.querySelector('[data-my-unique-id="rbutton1"]');
       uglyButton.addEventListener("click", function() {
         alert("Ugly button pushed");
       });


       var prettyButton = document.createElement("button");
       prettyButton.className = "pretty";
       prettyButton.appendChild(document.createTextNode("Push me!"));
       uglyButton.parentNode.appendChild(prettyButton);

       uglyButton.style.display = "none";

       prettyButton.addEventListener("click", function() {
         alert("Pretty button pushed");

         var event = new MouseEvent('click', {
           'view': window,
           'bubbles': true,
           'cancelable': true
         });
         uglyButton.dispatchEvent(event);        
       });

     }
     </script>
    </body>
</html>