Changer la couleur de fond de nuage de tags

Je suit le code simple pour un mot/tag dans un cloude:Changer la couleur de fond de nuage de tags

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

je veux changer l'arrière-plan sur un clic d'un mot. le problème est, que je n'ai pas seulement un mot avec la classe "tagweight0".

Voici mon code exemple jQuery:

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

Cela fonctionne, mais clic tous les mots avec classe « tagweight0 » sont avec un fond changé. Comment puis-je changer l'arrière-plan uniquement pour le mot choisi et non pour tous les tags?

edit: Puis-je effectuer le changement en utilisant les paramètres "href" ou "about"?

Source

2009-08-26 cupakob

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

Source

2009-08-26 08:19:00 RaYell

il travaille maintenant;) – cupakob

Pourquoi ne pas utiliser css?

a:active 
{ 
    background: #555555; 
}

Source

2009-08-26 08:25:28 Natrium

pas dans ce cas;) – cupakob

pourquoi est-ce pas possible? – Natrium

Je veux avoir plus d'un mot avec un arrière-plan modifié et pas seulement pendant l'événement click. – cupakob

Code complet de prise AnyChart avec le changement de fond

 <!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>

Source

2017-09-16 17:51:21 ankush

Changer la couleur de fond de nuage de tags

Répondre

Questions connexes