Передача идентификационных параметров функции

Question

Я надеюсь, что это простая проблема синтаксиса.
У меня есть несколько элементов на странице. При щелчке идентификатор каждого элемента должен быть передан в jquery. Это приведет к появлению непрозрачного слоя с более подробной информацией. Я изо всех сил пытаюсь получить значение id в скрипте.

Помогите пожалуйста?
Это часть формы:

<ul class="foodmenu"> 
    <li class="foodmenuitems"><img src="images/classic.png" id="classic" /></li> 
    <li class="foodmenuitems"><img src="images/blue.png" id="blue"/></li> 
</ul> 

и сценарий:

$(document).ready(function() { 
    $(".food-item-details").hide(); 
    $(".foodmenuitems").click(function() { 
     $(".food-item-details").hide(); 
     var foodItem = $(this).value; 
     $(foodItem).show('slow'); 
    }); 
    $(".close").click(function() { 
     $(".food-item-details").hide('slow'); 
    }); 
}); 

Любые советы с благодарностью получил!

Answer 1

Возможно, вы хотели бы получить var foodItem = '#' + this.id; - только входные данные формы имеют value.

Однако это все еще не может работать, поскольку идентификаторы должны быть уникальными. Вы можете легко исправить с помощью атрибутов данных, хотя:

<ul class="foodmenu"> 
    <li class="foodmenuitems"><img src="images/classic.png" data-item="classic" /></li> 
    <li class="foodmenuitems"><img src="images/blue.png" data-item="blue"/></li> 
</ul> 

$(document).ready(function() { 
    $(".food-item-details").hide(); 
    $(".foodmenuitems").click(function() { 
     $(".food-item-details").hide(); 
     var foodItem = $(this).data('item'); 
     $('#' + foodItem).show('slow'); 
    }); 
    $(".close").click(function() { 
     $(".food-item-details").hide('slow'); 
    }); 
}); 

Этот код теперь отображает элемент с идентификатором, указанным в data-item при нажатии его.