Question

我在tagcloud中有关于单词/标签的简单代码：

<a about="http://localhost/d456c6" href="http://localhost/d456c6" class="tagweight0 Resource">abda</a>

我想要点击一个单词来改变背景。问题是，我不只有一个单词“tagweight0”。

这里是我的jQuery示例代码：

$('tagweight0').livequery('click', function(event) {
    $("tagweight0").toggleClass("select");
    return false;
});

这是有效的，但点击所有类“tagweight0”的单词都有更改的背景。如何仅为选择的单词而不是所有标签更改背景？

编辑：我可以使用“href”或“about”参数进行更改吗？

Answer 1

$('.tagweight0').live('click', function(event) {
    $(this).toggleClass("select");
    return false;
});

Answer 2

如何使用css？

a:active
{
    background: #555555;
}

Answer 3

从任何图表中获取完整代码并进行背景更改

      <!doctype html>
<html>
<head>
  <script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
  <script src="https://cdn.anychart.com/samples-data/tag-cloud/population-by-countries/data.js"></script>
  <link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    html, body, #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .test{
    height: 20em;
    border: 1px solid;
    padding:0;
    }
  </style>
</head>
<body>
<div class="col-md-12 ">
<div class="col-md-4 test"><div id="container"></div></div><div class="col-md-4">hello2</div><div class="col-md-4">hello3</div>
</div>

    <script type="text/javascript">
anychart.onDocumentReady(function() {
  // The data used in this sample can be obtained from the CDN
  // https://cdn.anychart.com/samples-data/tag-cloud/population-by-countries/data.js
  var data = getData();
  var dataSet = anychart.data.set(data);
  var colors = anychart.scales.ordinalColor().colors(['#26959f', '#f18126', '#3b8ad8', '#60727b', '#e24b26']);

  // create tag cloud
  chart = anychart.tagCloud();
chart.background().fill({
        keys: ['#ccc'],

});
  // set chart title
  chart.title('World Population')
    // set data with settings
    .data(dataSet)
    // set color scale
    .colorScale(colors)
    // set array of angles, by which words will be placed
    .angles([-90, 0, 90]);

  // get the color range
  var colorRange = chart.colorRange();
  // enabled color range
  colorRange
    .enabled(true)
    // sets color line size
    .colorLineSize(15);

  // set container id for the chart
  chart.container('container');
  // initiate chart drawing
  chart.draw();

  // save normal fill function to variable
  var normalFillFunction = chart.normal().fill();
  // save hover fill function to variable
  var hoveredFillFunction = chart.hovered().fill();

  // create custom interactivity to hover colorRange
  chart.listen('pointsHover', function(e) {
    if (e.actualTarget === colorRange) {
      // if points exist
      if (e.points.length) {
        // set settings for normal state
        chart.normal({
          fill: 'black 0.1'
        });
        // set settings for hovered state
        chart.hovered({
          // get fill color ratio by its number and set fill to hovered state
          fill: chart.colorScale().valueToColor(e.point.get('category'))
        });
      } else {
        // set function for normal state
        chart.normal({
          fill: normalFillFunction
        });
        // set function for hovered state
        chart.hovered({
          fill: hoveredFillFunction
        });
      }
    }
  });
});
    </script>
</body>
</html>

更改标签云的背景颜色

3 个答案: