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

Question

我试图修改这个圆圈导航：https://codepen.io/gzuzkstro/pen/oemMyN

在第320行中，有"rect“标记来生成所有的”学习-更多“按钮。在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>

​

另外，这里有一个工作实例 :)

编辑：

另一方面，对于您的特殊情况，您可以看到这一个。

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>元素中获取一个特定的属性，并将其设置为#learn-more rect的data-url属性的值。

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

如果这不能满足您的要求，我希望您可以从中获得一些想法:)