Question

我正在尝试克隆链接，以便制作一系列图像可点击链接。我尝试使用jQuery - Copy a dynamic link from one element to another中的一些代码示例。它不起作用。

给出以下HTML代码：

<ul class="slides">        
  <li class="views-row views-row-1 views-row-odd views-row-first">
    <div>
      <img src="https://www.sfmta.com/sites/default/files/styles/home_slide/public/homeslides/2017/Clipper%20on%20Muni-1.png?itok=PPZNHt_N" width="630" height="369" alt="Image with a Clipper Card and illustrated Muni bus with text: Get Clipper and save on Muni." title="Get Clipper and save on Muni" />
    </div>
    <div class="slider-caption">
  <div class="row-fluid">
        <div class="span6 offset6">
          <div class="slider-caption-inner">
            <h2>
              <a href="https://www.sfmta.com/about-sfmta/blog/jan-1-muni-fare-changes-include-cash-free-benefits-extended-youth-discounts">New Muni Fare Changes</a>
            </h2>
        <p>New Muni fares include single-ride savings for using Clipper and MuniMobile.</p>
            <a href="https://www.sfmta.com/about-sfmta/blog/jan-1-muni-fare-changes-include-cash-free-benefits-extended-youth-discounts">Learn more</a>         
          </div>
        </div>
  </div>
    </div>
  </li>
... (more list items)
</ul>

我正在寻找以下结果，代码的第4行是唯一更改的行（包含克隆锚标记的img）：

<ul class="slides">        
  <li class="views-row views-row-1 views-row-odd views-row-first">
    <div>
      <a href="https://www.sfmta.com/about-sfmta/blog/jan-1-muni-fare-changes-include-cash-free-benefits-extended-youth-discounts"><img src="https://www.sfmta.com/sites/default/files/styles/home_slide/public/homeslides/2017/Clipper%20on%20Muni-1.png?itok=PPZNHt_N" width="630" height="369" alt="Image with a Clipper Card and illustrated Muni bus with text: Get Clipper and save on Muni." title="Get Clipper and save on Muni" /></a>
    </div>
    <div class="slider-caption">
  <div class="row-fluid">
        <div class="span6 offset6">
          <div class="slider-caption-inner">
            <h2>
              <a href="https://www.sfmta.com/about-sfmta/blog/jan-1-muni-fare-changes-include-cash-free-benefits-extended-youth-discounts">New Muni Fare Changes</a>
            </h2>
        <p>New Muni fares include single-ride savings for using Clipper and MuniMobile.</p>
            <a href="https://www.sfmta.com/about-sfmta/blog/jan-1-muni-fare-changes-include-cash-free-benefits-extended-youth-discounts">Learn more</a>         
          </div>
        </div>
  </div>
    </div>
  </li>
...
</ul>

我根据链接的Stack Overflow帖子尝试了两个不同的代码版本：

版本1：

jQuery(document).ready(function() {
  "use strict";
  jQuery('.slides .views-row .img').wrap(function() {
    return jQuery(this).closest('.views-row').find('h2 a').clone().text(''); 
  });
});

第2版：

jQuery(document).ready(function() {
  "use strict";
  jQuery('.slides .views-row .img').html(function(i,html) {
    return $(this).next('h2').find('a').clone().html( html );
  });
});

两种代码都不起作用。列表中的图像不会链接。 HTML代码保持不变。（在Windows上使用Firefox和Chrome进行测试。）

我的浏览器控制台上没有JavaScript错误。有一个警告要求jQuery最小化JavaScript本身“不推荐使用getPreventDefault（）。请改用defaultPrevented。”但这已经发生了，并没有阻止我网站上现有的jQuery代码工作。

任何想法/更正？

Answer 1

而是尝试使用不同的方式。

当您尝试点击图片时，尝试在链接上触发点击事件，因为两者都有相同的网址。

为什么我的jQuery动态链接克隆不起作用？

1 个答案: