没有触摸html的链接[关闭]答案

【问题标题】：Link without touch html [closed]没有触摸html的链接[关闭]
【发布时间】：2017-08-21 15:19:50
【问题描述】：

我在旧的 CMS 中有一个页面。它只允许我放一个img，但我不能放了。

img 有自己的 div class="flash"。

我可以在标题中添加一些脚本或 css，但我无法触摸 html.... 可以添加指向此图像的链接吗？

谢谢

【问题讨论】：

可以添加div html吗，要添加什么链接？是否还有一个或多个具有相同结构类型的 div？将这些添加到您的代码中
是的，您可以使用 jquery 向图像添加点击事件，使用类属性定位它。

标签： javascript jquery html css

【解决方案1】：

您可以使用 jQuery 将 div 替换为链接，如下所示：

var x = "http://example.com"

$(".flash").replaceWith(function() {
  return $("<a href='" + x + "'>" + this.innerHTML + "</a>")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flash">
  <img src="http://lorempixel.com/400/200/">
</div>

【讨论】：

我添加到标题：<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> var x = "http://example.com" $(".flash").replaceWith(function() { return $("<a href='" + x + "'>" + this.innerHTML + "</a>") }); </script> 但不起作用:-(

【解决方案2】：

是的，您可能只需要使用它，

var image = $('.flash').find('img')[0].outerHTML;
var link = '<a href="https://www.w3schools.com">'+ image + '</a>';
$('.flash').html(link);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='flash'>
<img border="0" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100">
</div>

【讨论】：

【解决方案3】：

由于您在问题上使用了 jQuery 标记。我建议你尝试像这样使用wrap()

$(".flash")

选择班级.flash

.wrap(<a href='https://google.com'></a>)

用我添加的标签用.flash 类包装元素。即，

<a href='https://google.com'></a>

完整的脚本放在一起：

$(".flash").wrap("<a href='https://google.com'></a>");

这样做会像这样渲染标记：

<a href='https://google.com'><img class="flash" src="http://via.placeholder.com/350x150"></a>

如果您单击图像上的任何位置，它将带您到 https://google.com 或包装器 <a> 标记的 href。

您只需将脚本$(".flash").wrap("<a href='example'></a>"); 添加到您的页面。将 example.com 更改为您想要的链接。

工作示例：

$(".flash").wrap("&lt;a href='https://google.com'&gt;&lt;/a&gt;");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="flash" src="http://via.placeholder.com/350x150">

【讨论】：

我添加到我的标题：'<script type="text/javascript"> $(".flash").wrap("<a href='https://google.com'></a>"); </script>but don't works
@JuanMedina 该脚本必须在 jQuery 之后加载。尝试在页脚底部添加脚本。
再次感谢....我做了但还是不行...你可以在页面handybag.es看到代码
@JuanMedina 问题是您的网站通过https 提供服务，但指向 jQuery 的链接使用http，这会导致 jQuery 的下载被阻止。总而言之，您的页面没有加载 jQuery，这就是为什么我的答案中的脚本不起作用的原因。您必须先修复指向 jQuery 的链接。
天啊.....我无法将 js 上传到服务器（我不能用这个 CMS 做很多事情）......我找到了这个stackoverflow.com/questions/17156128/…，但我使用ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js 总线仍然无法正常工作....您知道任何解决方案吗？

【解决方案4】：

您可以使用 window.open(url) 命令来执行此操作。只需向此类添加一个点击事件。例如：

$(".flash").click(function(){
  window.open("http//wwww.google.com", '_blank');
});

<html>
<head>
</head>
<body>
<div class="flash">click me</div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</body>
</html>

【讨论】：

非常感谢...您和其他人或多或少给出了相同的解决方案，但是你们都给了我两块代码，我真的不知道该放在哪里...你能指定我必须把它放在哪里吗？
第一个块是您需要的块。如果您有权访问它，您可以在页面上或链接到此页面的 js 文件上的任何位置添加它。它应该工作。如果有的话，最好将它放在 docomunt.ready() 命令中。如果不只是添加标记，请将其插入其中。
谢谢，我尝试将其添加到标题中：<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"> $(".flash").click(function(){ window.open("http//wwww.google.com", '_blank'); }); </script> 但不起作用。

【解决方案5】：

您可以将 'click' 事件应用于该 'flash' 类。例如。

$('flash').click(function(){ 

    //Whatever you want is here 
});

【讨论】：