Изменить цвет фона облака тегов - PullRequest
Новая
       8

Изменить цвет фона облака тегов

0 голосов
/ 26 августа 2009

У меня есть следующий простой код для слова / тега в облаке тегов: 

<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" имеют измененный фон. Как я могу изменить фон только для выбранного слова и не для всех тегов?

edit: могу ли я внести изменения, используя параметры "href" или "about"?

Ответы [ 3 ]

8 голосов
/ 26 августа 2009 
$('.tagweight0').live('click', function(event) {
    $(this).toggleClass("select");
    return false;
});
0 голосов
/ 16 сентября 2017

Полный код взят из любой диаграммы с изменением фона 

      <!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>
0 голосов
/ 26 августа 2009

Как насчет использования CSS? 

a:active
{
    background: #555555;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...