What does the codes after the html attribute mean

JavaScript
1 

function drawCircle(percent){
	$('.wrapper').html('<div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
}

Is it possible to make it simpler like:


if (percent > 50) {
	$('#slice').attr('gt50', '');
}

or something similar. Thank you,

2

Hi ketting00,

The original function uses a conditional statement that works like this:

[I]condition[/I] [B]?[/B] [I]if-true[/I] [B]:[/B] [I]if-false[/I].

This kind of statement can allow you to write more compact code, but can also make it less readable.

You could rewrite the function like this:

function drawCircle(percent){
  var piechart = $('<div id="slice"><div class="pie"></div></div>');
  if (percent > 50) {
    piechart.addClass('gt50').append('<div class="pie fill"></div>');
  }
  $('.wrapper').html(piechart);
}

which might make it easier to see what’s going on.

3

Thank you,
Your code seems to work, apparently.