slideToggle Bu <code>input</code> var düğme

Question

olarak alt ile bir görüntü girişine çalışmıyor:

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

Ve buna bu görüntülerin nihai çıktısı: Her Şimdi

Bu görüntüler düğmelerdir ve slideToggle()<div id="div_one"></div> ve div_two ve div_thirty_one tarihine kadar ihtiyacım vardır.

Ben jQuery kullanarak bu senaryoyu yapılan ve sadece bir düğmeye üzerinde test ama işe yaradı vermedi ve konsol hiçbir hataları:

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

slayt yok bu görüntü butonuna tıklandığında.

Answer 1

Değişiklikler ► <img> için ortak bir sınıf eklendi

yaptı. Tıklanan img ile ilgili olarak ilgili metni bulabilir ve değiştirebiliriz. nedense

Çalışma Demo

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

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