Question

我想将我网站上的图片更改为使用Javascript的链接，以便当用户点击图片时，他们会被重定向到网站。我的HTML代码和Javascript代码如下。我试着模仿这个帖子中提到的内容但是没有成功（how to add a link to an image using jquery?）。

我尝试创建链接的图片是http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg

感谢您的帮助。

我的Javascript代码

jQuery('.profile-avatar.open-photo-swipe').wrap($('<a>',{
   href: link2;
}));

我的HTML代码

<div class="profile-header">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div v-pre>
                    <a class="profile-avatar open-photo-swipe"
                           href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
                           style="background-image: url('http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-300x300.jpg')"
                           data-width="1024"
                           data-height="576"
                           >
                        </a>
                                        </div>
                <div class="profile-name" v-pre>
                    <h1 class="case27-primary-text">Offer 2</h1>
                                                <h2>blag</h2>
                                        </div>
                <div class="cover-details" v-pre>
                    <ul></ul>
                </div>
                <div class="profile-menu">
                    <ul role="tablist">
                        <li class="active">
                                <a href="#_tab_1" aria-controls="_tab_1" data-section-id="_tab_1"
                                   role="tab" class="tab-reveal-switch toggle-tab-type-main">
                                    Profile </a>
                            </li><li class="">
                                <a href="#_tab_2" aria-controls="_tab_2" data-section-id="_tab_2"
                                   role="tab" class="tab-reveal-switch toggle-tab-type-comments">
                                    Comments
                                      <span class="items-counter">0</span>

                                    </a>
                            </li> <div id="border-bottom"></div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

jQuery('.profile-avatar.open-photo-swipe')

此元素是链接，而不是图片：

<a class="profile-avatar open-photo-swipe"
   href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"

所以使用

jQuery('.profile-avatar.open-photo-swipe').prop('href', link2)

使用Javascript将图像更改为链接

1 个答案: