CODEWITHSUNDEEP
jqueryasp.net-mvc
user4155786
user4155786

Reputation:

show and hide button with multiple divs jquery mvc

This is my view page:

for (int i = 0; i < Model.Count; i++)
{
  <div class="row service-block" id="searchresult@(i)">
    <div class="col-lg-6 col-md-5">
      <div class="mrb5">
        <label>abc</label>
        <label>Xyz</label>
        <input type="button" style="display:none;"class="bookappointmentbutton" id="btnAppointment" value="Book Appointment" />
      </div>
    </div>
  </div>
}

And the JavaScript:

$(document).ready(function () {
  $("#searchresult").mouseenter(function () {
    $('#btnAppointment').show();
  });
  $("#searchresult").mouseleave(function () {
    $('#btnAppointment').hide();
  });
});

I am displaying list of records like this:

enter image description here

consider this image as an example because this is how i am displaying list of records.

now i want to do is when my mouse hovers over div say for eg searchresult0 then i want to show button and on mouseleave i want to hide button.

when my mouse hover over searchresult1 then i want to display button and on leave hide button.

but as i am generating new div for every records i am not getting how to to this with different division.

Upvotes: 0

Views: 1389

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82251

Use this to find element in currently hovered div. also you have duplicate IDs in DOM. IDs should be unique. use class selector instead of keeping duplicate IDs:

    $("[id^=searchresult]").mouseenter(function () {
         $(this).find('.bookappointmentbutton').show();
    });
    $("[id^=searchresult]").mouseleave(function () {
        $(this).find('.bookappointmentbutton').hide();
    });

As suggested by A. Wolff, You can narrow down these two event to single event by using .hover()

$("[id^=searchresult]").hover(function () { $(this).find('.bookappointmentbutton').toggle(); });

Working Demo

Upvotes: 1

Related Questions