Каков синтаксис отправки параметров в теге <a>

Question

В данном коде я пытаюсь добавить динамический идентификатор в div внутри цикла foreach на основе переменной i.

Однако я не могу найти правильный синтаксис, и та же проблема связана с вызывающей функцией jQuery.Я пытаюсь отправить параметр i в функцию DeleteCurrentImage.Пожалуйста, ведите меня.Спасибо.Этот код записан в файле MVC .cshtml.

<div id="filesList">
  @foreach (var item in imgArray)
  {
    var i = 0;
    <div class="img101 floatleft" id="img101_' + i + '">
      <img src="@item" />
      <a href="#" id="DeleteCurrentImage" onclick="DeleteCurrentImage('+ i +');">Delete</a>
    </div>
    i += 1;
  }
  <div style="clear: both"></div>
</div>

Answer 1

Вы должны сделать это исправления:

1. Инициализация i вне foreach;
2. В цикл добавьте каждый элемент с вызовом функции, передающей идентификатор (предваряемый# селектор идентификатора)
3. В функции Удалить искомый элемент по переданному id

4. Увеличить i

   <div id="filesList">
       @{
           var i = 0;
           foreach (var item in imgArray) 
           {             
               <div class="img101 floatleft" id="img101_@(i)">
                   <img src="@item" />
                   <a href="#" onclick="DeleteCurrentImage('#img101_@(i)');">Delete</a>
               </div>
               i++;
           }
       }
       <div style="clear: both"></div>
   </div>
   <script>
       function DeleteCurrentImage(item) {
           // Delete the element
           $(item).remove();
       }
   </script>
   

Answer 2

i - это переменная в вашем коде C #, поэтому вам нужно вывести ее в HTML на стороне сервера, а не из JS.Вы можете сделать это следующим образом:

<a href="#" onclick="DeleteCurrentImage(@i);">Delete</a>

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

Как говорится, гораздо лучшая идеяиспользуйте ненавязчивые обработчики событий вместо on* атрибутов событий.Затем вы можете просто пройти через DOM, чтобы найти контент, связанный с элементом, вызвавшим событие, без необходимости создавать какие-либо уникальные атрибуты id.Помечая вопрос с помощью jQuery, вы можете добиться этого следующим образом:

<div id="filesList">
  @foreach (var item in imgArray) 
  { 
    <div class="img101 floatleft">
      <img src="@item" />
      <a href="#" class="DeleteCurrentImage">Delete</a>
    </div>
  }
  <div style="clear: both"></div>
</div>

$('.DeleteCurrentImage').click(function() {
  $(this).prev('img').remove();
});

Обратите внимание, что при этом удаляется элемент img.Если вы хотите удалить весь содержащий div, измените .prev('img') на .closest('div')