删除文件前显示警告的Jquery代码

Question

我一直试图使用jquery删除文件，以显示警告消息，并知道需要删除哪个文件，但当我单击Orange时，它将显示警告，而其他人只在第一个文件中单击jquery $('#DeleteJfile').click(function()时不显示警告消息或删除文件。

<ul>
<li id="DeleteJfile" data-animal-type="delete-1">Orange</li> 
<li id="DeleteJfile" data-animal-type="delete-2">Banana</li> 
<li id="DeleteJfile" data-animal-type="delete-3">Mango</li> 
<li id="DeleteJfile" data-animal-type="delete-4">You</li> 
</ul>

<div class="AreYousure-box" style="display:none;">
Are you sure you want to delete this file?
<br/>
<form method="post" action="delete.php">
<input type="hidden" id="TodeletFile"/>
<input type="submit" name="yes" value="yes">
<input type="button" id="no" value="no"></form>
</div>

我的jquery脚本

 <script>
    $('#DeleteJfile').click(function(){
         var TypeOfVote = $(this).attr('data-animal-type').split("-")[1];
                alert(TypeOfVote);
                 $('.AreYousure-box').toggle();
                 $('#TodeletFile').val(TypeOfVote); 
              });
    </script>

Answer 1

id在HTML中应该始终是唯一的。为此使用class。

 <ul>
   <li class="DeleteJfile" data-animal-type="delete-1">Orange</li> 
   <li class="DeleteJfile" data-animal-type="delete-2">Banana</li> 
   <li class="DeleteJfile" data-animal-type="delete-3">Mango</li> 
   <li class="DeleteJfile" data-animal-type="delete-4">You</li> 
 </ul>

然后

 $('.DeleteJfile').click(function()

Answer 2

这是因为在多个元素中使用相同的id DeleteJfile，请将id更改为类，然后再试一次。看起来不错。

<script>
    $('.DeleteJfile').click(function(){
         var TypeOfVote = $(this).attr('data-animal-type').split("-")[1];
                alert(TypeOfVote);
                 $('.AreYousure-box').toggle();
                 $('#TodeletFile').val(TypeOfVote); 
              });
    </script>

Answer 3

ID应该始终是唯一的。

事件绑定到它遇到的第一个ID，在您的示例中，Orange是第一个具有此ID的DOM，因此单击事件只适用于Orange，

使用class代替

Demo