2014-10-08 79 views
0

HTMLJavaScript函数只能使用一次。任何想法为什么?

我正在尝试创建一个todolist应用程序。我想让每个任务列表都用渐变过渡来删除。我已经实现了它,但是我的代码的问题是它只隐藏了第一个div区域。

<div id="task"> 
      <input type="checkbox" id="completed"> 
      <h2>Buy some fruits</h2> 
     </div> 
     <div id="task"> 
      <input type="checkbox" id="completed"> 
      <h2>Buy some fruits</h2> 
     </div> 

JQuery的

$("#completed").change(function(){$("#item").fadeToggle("fast", "linear")}); 
+7

你有在网页上使用相同ID不止一个元素

$(".completed").change(function(){ } $(this).hide();}); 

请修改此代码。 – akonsu 2014-10-08 05:34:58

+0

您应该使用'''class'''而不是''ID''',因为Id在上下文中应该是唯一的,并且只返回具有相同'''ID''的第一个元素 – kuldipem 2014-10-08 05:37:36

回答

5

不使用mutipple id's在同一页上使用class代替

<div class="task"> 
    <input type="checkbox" class="completed"> 
    <h2>Buy some fruits</h2> 
</div> 
<div class="task"> 
    <input type="checkbox" class="completed"> 
    <h2>Buy some fruits</h2> 
</div> 

$(".completed").change(function(){$("#item").fadeToggle("fast", "linear")}); 

// same apply to your #item 
0

你不应该具有相同id多个元素。这个属性的全部要点是唯一标识一个元素。因此

<input type="checkbox" class="completed"> 

而JavaScript:

喜欢的东西取代它

$(".completed").change(function(){$("#item").fadeToggle("fast", "linear")}); 

这应该整理你的问题了。

0

试试这个:

<div> 
    <input type="checkbox" class="checkbox"> 
    <h2>Buy some fruits</h2> 
</div> 
<div> 
    <input type="checkbox" class="checkbox"> 
    <h2>Buy some fruits</h2> 
</div> 
<script type="text/javascript"> 
    $(".checkbox").change(function(){$(this).parent().fadeToggle("fast", "linear")}); 
</script> 

OR

<div> 
    <input type="checkbox"> 
    <h2>Buy some fruits</h2> 
</div> 
<div> 
    <input type="checkbox"> 
    <h2>Buy some fruits</h2> 
</div> 
<script type="text/javascript"> 
    $("input[type=checkbox]").change(function(){$(this).parent().fadeToggle("fast", "linear")}); 
</script> 
0

id两个输入元素相同。

您可以使用班级而不是id

像下面为每U [R

相关问题