Question

HTML

我正在尝试创建一个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")});

Answer 1

请勿在同一页面上使用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

Answer 2

您不应该有多个具有相同id的元素。该属性的重点是唯一标识元素。

将其替换为：

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

相应的javascript：

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

这应该解决你的问题。

Answer 3

试试这个：

<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>

Answer 4

两个输入元素的

id 相同。

您可以使用class而不是id。

如下所示

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

请按照

修改此代码

Javascript函数只能工作一次。知道为什么吗？

4 个答案: