如何摆脱图片中隐藏的 HTML 文本？答案

【问题标题】：How to get rid of hidden HTML text within picture?如何摆脱图片中隐藏的 HTML 文本？
【发布时间】：2014-08-08 00:33:43
【问题描述】：

我正在这里创建一个测试“立即购买”按钮 - http://www.moonechoaudio.com/terms-conditions/ 确保滚动到底部并看到购买按钮。正如你所看到的，它下面有文字“fire refill”。我怎样才能摆脱这个文本？这是按钮的代码。谢谢！

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <title>jQuery Selz Plugin</title>
        <link href="http://cdn.selz.com/jquery/1.0.3/jquery.selz.min.css" rel="stylesheet">
    </head>
    <body>
        <ul>

            <li{list-style-type: none;}><a href="http://selz.co/1triLby">Buy now</a></li>
        </ul>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://cdn.selz.com/jquery/1.0.3/jquery.selz.min.js"></script>
        <script>
        $(function () {
        $.selz({
        buttonBg: "#60aae0",
        buttonText: "#fff",
        prefetch: true,
        onDataReady: function ($link, data) {
        $link.html('<img src="http://static.squarespace.com/static/53752a6de4b0aefc671bc01d    /53e3fae6e4b0941835a9aac8/53e3fae6e4b0d4852873ddd5/1407449840921 /Screen%20Shot%202014-08-07%20at%205.35.42%20PM.png?format=1500w"' + data.ImageUrlSmall + '" alt="' +   data.Title + '"><br>' + data.Title);
        },
        onModalOpen: function ($link) {
        console.log("Overlay opened!");
        },
        onPurchase: function (data) {
        console.log(data);
        },
        onProcessing: function (data) {
        console.log(data);
        }
        });
        });
        </script>
    </body>
</html>

【问题讨论】：

该文本来自您的代码在<img> 标记之后添加的data.Title。

标签： javascript jquery html button text

【解决方案1】：

您只需将其从代码中删除即可。找到代码：

buttonText: "#fff",
prefetch: true,
onDataReady: function ($link, data) {
$link.html('<img src="http://static.squarespace.com/static/53752a6de4b0aefc671bc01d    /53e3fae6e4b0941835a9aac8/53e3fae6e4b0d4852873ddd5/1407449840921 /Screen%20Shot%202014-08-07%20at%205.35.42%20PM.png?format=1500w"' + data.ImageUrlSmall + '" alt="' +   data.Title + '"><br>' + data.Title);
},

并将 <br>' + data.Title 更改为 '，如下所示：

buttonText: "#fff",
prefetch: true,
onDataReady: function ($link, data) {
$link.html('<img src="http://static.squarespace.com/static/53752a6de4b0aefc671bc01d    /53e3fae6e4b0941835a9aac8/53e3fae6e4b0d4852873ddd5/1407449840921 /Screen%20Shot%202014-08-07%20at%205.35.42%20PM.png?format=1500w"' + data.ImageUrlSmall + '" alt="' +   data.Title + '">');
},

现在应该没问题了。

【讨论】：

【解决方案2】：

删除最后一个data.Title

$link.html('<img src="http://static.squarespace.com/static/53752a6de4b0aefc671bc01d    /53e3fae6e4b0941835a9aac8/53e3fae6e4b0d4852873ddd5/1407449840921 /Screen%20Shot%202014-08-07%20at%205.35.42%20PM.png?format=1500w"' + data.ImageUrlSmall + '" alt="' +   data.Title + '">');

或者，如果你真的需要你的文本，你可以使用 CSS 来使用背景图像，然后缩进你的文本。只需在您的锚标记中添加一个类/ID，然后：

#your-link {
    background-image:url('imageURL.jpg');
    text-indent:-9999em;
}

或者...你可以给链接一个透明的颜色。但这很奇怪。

#your-link {
    color:transparent;
}

【讨论】：

【解决方案3】：

改变 $link.html('<img src="http://static....0PM.png?format=1500w"' + data.ImageUrlSmall + '" alt="' + data.Title + '"><br>' + data.Title);

到

$link.html('<img src="http://static....0PM.png?format=1500w"' + data.ImageUrlSmall + '" alt="' + data.Title + '"><br>' );

【讨论】：