show and hide button with multiple divs jquery mvc

Question

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.

What is the outer element, in which these "searchresult" elements sit? — Roamer-1888
– Roamer-1888, Commented Oct 29, 2014 at 11:25

Milind Anantwar · Accepted Answer · 2014-10-29 11:35:19Z

1

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

edited Oct 29, 2014 at 11:35

answered Oct 29, 2014 at 11:15

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

A. Wolff Over a year ago

+1 but could be simplified as: $("[id^=searchresult]").hover(function () { $(this).find('.bookappointmentbutton').toggle(); });

Milind Anantwar Over a year ago

Indeed. but not sure whether delegation is required or not here as OP is looping and creating element dynamically. and hover wont be delegated.

A. Wolff Over a year ago

But here you aren't delegating events anyway ;)

Collectives™ on Stack Overflow

show and hide button with multiple divs jquery mvc

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related