Блог

Главная - Вопросы по программированию - Переключать только одну кнопку при нажатии

Переключать только одну кнопку при нажатии

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

На странице есть несколько кнопок. При нажатии срабатывают все кнопки.

Сделайте только одну кнопку, которая находится в той, на которую был нажат, и в том же div с

«Подробности», срабатывает при нажатии.

те же кнопки на странице:

 
jQuery(function($) {
  $(document).ready(function() {
    $('#bttn > button').click(function() {
      $('.details').toggle("fast");

    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttn" style="text-align: center;"><button class="orange-button">Show details</button></div>`

<div>
  <p class="details" id="abc" style="text-align: center;color:grey;padding:1em;background-color:white;margin:5px;display:none;">info@thithi.com</p>
</div>

Комментарии:

1. Вам нужно назначить id на кнопке, с которой вы хотите, чтобы отображались сведения. Назначьте unique для этого, а затем забудьте о других кнопках.

2. Вы также задавали тот же вопрос вчера — я предложил то же самое, я не уверен, почему вы не хотите указывать id на эту кнопку.

3. @AlwaysHelping Я попробовал ваше предложение, и оно не сработало. Есть те же 10 кнопок с тем же идентификатором.

4. Идентификаторы должны быть уникальными для каждого. Это не очень хорошая практика в кодировании, чтобы использовать то же самое id , у вас будет много проблем.

Ответ №1:

Для этой структуры html следует перейти следующим образом и найти соответствующий .details :

 jQuery(function($) {
  $(document).ready(function() {
    $('#bttn > button').click(function() {
      // Changed Code
      $(this).parent().next().find('.details').toggle("fast");
    });
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttn" style="text-align: center;"><button class="orange-button">Show details</button></div>`

<div>
  <p class="details" id="abc" style="text-align: center;color:grey;padding:1em;background-color:white;margin:5px;display:none;">info@thithi.com</p>
</div>