Question

我正在尝试创建一个jquery代码，它可以使用链接包装img标记：

我的代码是这样的：

我会在这里粘贴我的HTML，但基本上它是在每个col中显示的许多项目的循环。

<div class="car-item gray-bg text-center first" style="height: 357px;">        
        <div class="car-image">            
            <img class="img-responsive" src="http:///wp-content/uploads/2018/03/20180214_090633-265x190.jpg" alt="" width="265" height="190">            
            <div class="car-overlay-banner">
                <ul>
                    <li><a href="http:///cars/chevrolet-silverado-1500-lt-z71/" data-toggle="tooltip" title="" data-original-title="View"><i class="fa fa-link"></i></a></li>

我这样想：

var wrapped = false;
    var original = $(".img-responsive");

    $(".img-responsive").click(function(){
        if (!wrapped) {
            wrapped = true;
            var gURL = $('.car-overlay-banner').find('a').attr('href');
            $(".img-responsive").wrap("<a href=\"'+ gURL +'\"></a>");
        }
    });

    $(".img-responsive").click(function(){
        if (wrapped) {
            wrapped = false;
            $(".img-responsive").parent().replaceWith(original);
        }
    });

尝试使用汽车覆盖的href也应用于图像。

Answer 1

jQuery提供了一个名为“wrap（）”的方法，可用于在匹配元素集中插入任何HTML结构。简单来说，如果你想在你的div元素周围放置包装器，那么你可以使用wrap（）方法。例如，您有一个ID为“Child”的div。

<div id="Child"></div>

并希望将div与任何父级包装在一起，然后您可以使用“wrap（）”方法插入HTML。

$('#Child').wrap('<div id="Parent"></div>');

<div id="parent">
  <div id="child"></div>
</div>

同样，我们将使用wrap（）方法向图像标记插入超链接，以使图像变得可点击。见下文。

$(document).ready(function() {
    $("#imgLogo").wrap('<a href="http://jquerybyexample.blogspot.com/"></a>');
});

在这个例子中，我使用了ID作为选择器，但你可以使用类选择器来查找具有相同类的所有图像，然后用标记包装它们。您还可以在上面的标记中指定target =“_ blank”以在新窗口中打开链接。

Answer 2

我认为你需要这样的代码吗？

    var wrapped = false;
    var original = $(".img-responsive");

    $(".img-responsive").click(function(){
        if (!wrapped) {
            var wrapped = true;

            // find link href in .car-image(img-responsive's parent) 
            var gURL = $(this).parent().find('a').attr('href');

            // use $(this) instead of $(".classname") to apply link only clicked image
            $(this).wrap("<a href=\""+ gURL +"\"></a>");
        }
    });

    $(".img-responsive").click(function(){
        if (wrapped) {
            var wrapped = false;
            $(this).parent().replaceWith(original);
        }
    });

创建图像链接

2 个答案: