Jquery для переключения отдельных элементов в повторителе

Question

Надеюсь, этот вопрос понятен.

У меня есть повторитель с несколькими строками из базы данных, и у каждого ряда есть картинка и кнопка

как это:

 <asp:Repeater runat="server" DataSourceID="SqlDataSource1" ID="repeater1">
                <ItemTemplate>

                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" style="height: 200px;">
                         <div class="thumbnail text-center sletbox">
                            <img class="img-responsive" src='../fotos/<%# Eval("url") %>' alt=""></a>

                             <div class="slet">
                            <a href='delete_picture.aspx?id=<%# Eval("pic_id") %>&a=<%# Eval("album") %>&n=<%# Eval("url") %>' onclick="return confirm('Vil du slette dette billed?')">
                                <h3 class="btn btn-danger btn-xs" id="contact">Slet</h3>
                            </a>
                      </div>

                    </div>

                    </div>
                    <!-- col-lg-4 -->
                </ItemTemplate>
            </asp:Repeater>

Затем я сделал функцию jquery, которая заставляет кнопку появляться при наведении курсора, и это прекрасно работает.

<script>
    $(document).ready(function () {
        $(".slet").hide();
        $(".sletbox").hover(function () {
            $(".slet").fadeToggle(50);
        });
    });
</script>

Но проблема в том, что он заставляет ВСЕ кнопки появляться, а не только ту, которую вы зависли.

Так как мне сделать так, чтобы отображался только тот, который вы зависли?

Answer 1

Попробуйте с кодом ниже:

 $(document).ready(function () {
      $(".slet").hide();
      $(".sletbox").hover(function () {
         $(this).find(".slet").fadeToggle(50); //locating the associated .slet and not the all one.
      });
 });