Question

我正在尝试修改此圈子导航：https://codepen.io/gzuzkstro/pen/oemMyN

在第320行中，有一个“ rect”标签来生成所有的“ Learn-more”按钮。在javascript文件第160行中，有一个“ class_index”变量可为导航建立索引。

html文件行320：

<rect data-url="/industries" id="learn-more" x="280" y="250" width="90" height="30" />

js文件第160行：

//There's a "serv-*" class for each bubble
let current_class = current.attr("class").split(" ")[1];

我如何使用索引来为“ data-url”属性赋予不同的锚点？我目标的概念是这样的，但是我使用了多个“按钮”标签。

var learnMore = $('.learnmore');

$('.buttons').on('click', '.topic', function (event) {
  var url = $(event.target).data('url');
  learnMore.attr('href', url);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a class="learnmore" href="#foo">Learn more</a>
</div>

<div class="buttons">
  <button class="topic" data-url="#foo">Foo</button>
  <button class="topic" data-url="#bar">Bar</button>
  <button class="topic" data-url="#baz">Baz</button>
</div>

Answer 1

您可以尝试这样做：

$(document).ready(()=>{
  // our learn more element
  let $learnMore = $('.learnmore')

  $("button[class^='service serv-']").on('click', (e)=>{
    $($learnMore).attr('data-url', $(e.target).attr('data-url'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a class="learnmore" href="#foo">Learn more</a>
</div>

<div class="buttons">
  <button class="service serv-1" data-url="#foo">Foo</button>
  <button class="service serv-2" data-url="#bar">Bar</button>
  <button class="service serv-3" data-url="#baz">Baz</button>
</div>

另外，这是working example：）

编辑：

另一方面，对于您的特定情况，您可以改为查看this one。

let learnMore = $('#learn-more');
// get the circle inside the group container
$("g[class^='service serv-'] circle").on('click', function(e){    
  // grab the value of the 'xlink:href' element inside the group container
  let dataUrl = $(this).parent().find('use').attr('xlink:href');
  // set the value above as the value of our #learn-more element's data-url attribute
  $(learnMore).attr('data-url', dataUrl);
  console.log($(learnMore).attr('data-url'))
});

（上面的代码在脚本末尾）

说实话，我对您当前使用的元素并不完全熟悉。但是，我所做的是，我从组容器内的<use>元素中获取了一个特定的属性，并将其设置为data-url rect的#learn-more属性的值。

另一方面，在上面的工作示例中，我还留下了一些旧代码，这些代码将组容器的类（<g>似乎具有您提到的索引）设置为data-url矩形的#learn-more属性

如果这不能满足您的要求，我希望您可以从中汲取一些想法：）

如何在一个标签中的“ data-url”属性上放置不同的锚？

1 个答案:

编辑：