Динамическое значение настройки с помощью JQuery

Question

У меня есть таблица заданий. Внутри каждой строки находится ячейка, которая при нажатии вызывает скрытый div справа от таблицы. Внутри div - это форма, которая позволяет пользователю связать выбранный документ с задачей.

В настоящее время таблица генерируется, частично, циклом «для» PHP; Я перемещаюсь по массиву и создаю новую строку таблицы для каждого индекса массива.

Внутри каждой строки есть две ячейки таблицы. Я хочу, чтобы содержимое одной из ячеек представляло собой гиперссылку, которая при нажатии будет отображать скрытый div. Внутри скрытого div будет форма. Форма будет иметь скрытое поле ввода, и я бы хотел динамически установить это значение при нажатии гиперссылки.

Вот пример таблицы:

<table> 
    <tr> 
    <th>Task</th> 
    <th></th> 
    </tr> 

    <?php 
    for($i=0; $i<sizeof($task_array); $i++) 
    { ?> 
     <tr> 
     <td><?php echo $task_array[$i]['task'];?></td> 
     <td><a href="#" id="show_div">Attach Doc</a></td> 
     </tr> 
    } 
    ?> 
</table> 

Вот скрытый DIV и форма:

<div id="hidden_div"> 
    <form action="[url]" method="post" enctype="multipart/form-data"> 
    <label for="file">Filename:</label> 
    <input type="file" name="file" id="file" />   
    <input type="hidden" id="task_id" value=""> 
    <input type="submit" name="submit" value="Submit" /> 
    </form> 
</div> 

Я знаю, что я могу сделать следующее с JQuery, чтобы отобразить скрытые DIV:

$("#hiddendiv").show(); 

Я также знаю, что скрытое поле «TASK_ID» может быть установлен с помощью JQuery

$("#task_id").val() = 'some value'; 

Проблема, с которой я столкнулась, состоит в том, что поскольку значения поступают из массива, я не уверен, как указать конкретное значение. Например, значение идентификатора задачи находится в переменной $ task_array [$ i] ['task_id']. Я могу это попробовать:

$('#show_div').click(function(){ 
    $("#hiddendiv").show(); 
      $("#task_id").val() = ??? 
}); 

Я как бы застрял в указании, для которого итерация использует значение идентификатора задачи.

Приносим извинения, если это было не очень ясно. Любая помощь будет оценена по достоинству. Благодарю.

Answer 1

PHP

<?php 
    for($i=0; $i<sizeof($task_array); $i++) 
    { ?> 
     <tr data-task-id="<?php echo $task_array[$i]['task_id'];?>"> 
     <td><?php echo $task_array[$i]['task'];?></td> 
     <td><a href="#" id="show_div">Attach Doc</a></td> 
     </tr> 
    } 
    ?> 

Смотрите, что я добавил data-attribute имени data-task-id к tr элементов, в котором хранится task_id для этой строки. Мы можем использовать это в обработчике событий click позже.

JS

//bind an event handler to the `tr` elements for the `click` event to show the `tr`s children elements (the `td`s) 
$('tr').on('click', function() { 
    $(this).children().show(); 

    //this next line is how we get the `task_id` associated with a row 
    $(this).attr('data-task-id'); 
}); 

//since we bound an event handler to the `tr` elements for the `click` event it's a good idea to stop the propagation of click events on links within the `tr` elements so the event doesn't bubble up the the `tr` elements 
$('tr').find('a').on('click', function (event) { 
    event.stopPropagation(); 
}); 

Обратите внимание, что .on() нового в JQuery 1.7 и в этом случае такой же, как .bind().

Кроме того, вам необходимо изменить идентификатор элемента #show_div для каждого элемента (ID должен быть уникальным). Я рекомендую просто изменить его к классу вместо того, чтобы использовать идентификатор:

<td><a href="#" class="show_div">Attach Doc</a></td> 

Затем вы можете связать обработчик событий к нему, как это:

$('.show_div').click(function(){ 
    $("#hiddendiv").show(); 
    $("#task_id").val($(this).parents('tr').eq(0).attr('data-task-id')); 
});