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

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

3 个答案: