Javascript-форум - Упростить код

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Упростить код (https://javascript.ru/forum/misc/56345-uprostit-kod.html)

Упростить код

день добрый.
написал код, все работает хорошо, но уверен что так тупо писать не стоит и этот код можно упростить.
подскажите как это сделать. пробовал в цикл впихивать - не работает

function myCallback(returnedData) {
			if(returnedData.style!=="none"){
				$(returnedData.id).removeClass();
				$(returnedData.id).addClass(returnedData.style);
			}
		}
		
		$("#f1").click(function(){
			var data = "turn=1";
			$.get("index.php", data, myCallback,"json");
		});
		
		$("#f2").click(function(){
			var data = "turn=2";
			$.get("index.php", data, myCallback,"json");
		});
		
		$("#f3").click(function(){
			var data = "turn=3";
			$.get("index.php", data, myCallback,"json");
		});
		
		$("#f4").click(function(){
			var data = "turn=4";
			$.get("index.php", data, myCallback,"json");
		});
		
		$("#f5").click(function(){
			var data = "turn=5";
			$.get("index.php", data, myCallback,"json");
		});
		
		$("#f6").click(function(){
			var data = "turn=6";
			$.get("index.php", data, myCallback,"json");
		});
		
		$("#f7").click(function(){
			var data = "turn=7";
			$.get("index.php", data, myCallback,"json");
		});
		
		$("#f8").click(function(){
			var data = "turn=8";
			$.get("index.php", data, myCallback,"json");
		});
		
		$("#f9").click(function(){			
			var data = "turn=9";
			$.get("index.php", data, myCallback,"json");
		});

Либо источник передает данные, например, посредством data-val(1), data-val(1), и и.д., либо именовать ID так: f-1, f-2, .... и тогда один обработчик:

$("[id|=f]").click(function(){
            $.get("index.php", this.id.split('-)[1], myCallback,"json");
        });

<style>
p {
width: 100px;
height: 20px;
background: black;
}
</style>
<div id="div">
<p data-turn="turn=1"></p>
<p data-turn="turn=2"></p>
<p data-turn="turn=3"></p>
<p data-turn="turn=4"></p>
<p data-turn="turn=5"></p>
</div>

<script>
document.getElementById('div').addEventListener('click', fn, false);

function fn (e) {
var data =  e.target.getAttribute('data-turn');
if(data) alert(data); 
// вместо alert поставишь  $.get("index.php", data, myCallback,"json");

}
</script>

Цитата:

Сообщение от caetus

document.getElementById('div').addEventListener('c lick', fn, false);
......

А смысл такого борща? Ну уж тогда выбрасывать и $.get("index.php", data, myCallback,"json"), и использовать девственный XMLHttpRequest. Иначе

$.get("index.php", $(this).data("turn"), myCallback,"json");

<div id="div">
   <p id="f1"></p>
   <p id="f2"></p>
   <p id="f3"></p>
   <p id="f4"></p>
   <p id="f5"></p>
</div>

$('#div').on('click', 'p', function() {
   var f = /f(\d+)/.exec(this.id)[1];
   $.get('index.php', 'turn=' + f, myCallback, 'json');
});