slideToggle不使用alt作为按钮处理图像输入

Question

我有input：

    <div class="form-group col-md-12">
    <input type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="one" name="one" alt="button"/>

     <div id="div_one" class="collapse">3rd Molar: <?php echo $resTeeth['one'] ?></div>

<!--31 one more similar input images-->

</div>

这是这些图片的最终输出：

现在每个图片都是按钮，我需要slideToggle()一个<div id="div_one"></div>和div_two，直到div_thirty_one。

我使用jQuery创建了此脚本并仅在一个按钮上进行了测试，但它没有工作，并且在控制台上没有错误：

$(document).ready(function()
{
  $("#one").click(function()
  {
    $("#div_one").slideToggle();
  });
});

点击此图片按钮时没有幻灯片。

Answer 1

所做的更改

►为<img>添加了一个公共课程。对于单击的img，我们可以找到相应的文本并进行切换。

工作演示

＆＃13;

＆＃13;

$(document).ready(function()
{
  $(".img").click(function()
  {
    $(this).next().slideToggle();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-12">
    <input class="img" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="one" name="one" alt="button"/>

     <div id="div_one" class="collapse">3rd Molar: <?php echo $resTeeth['one'] ?></div>

<!--31 one more similar input images-->

</div>

＆＃13;

＆＃13;

＆＃13;